在我的弹出式灯箱中添加外部链接

Question

在我的网站上，我想在一个框架中显示谷歌网站，但这是我的错误：拒绝在框架中显示，因为它将'X-Frame-Options'设置为'SAMEORIGIN'

所以我想在弹出灯箱中显示链接，但不知道我该怎么做!!这是我的弹出灯箱代码：

$(document).ready(function() {

  var id = '#dialog';

  //Get the screen height and width
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();

  //Set heigth and width to mask to fill up the whole screen
  $('#mask').css({
    'width': maskWidth,
    'height': maskHeight
  });

  //transition effect
  $('#mask').fadeIn(500);
  $('#mask').fadeTo("slow", 0.9);

  //Get the window height and width
  var winH = $(window).height();
  var winW = $(window).width();

  //Set the popup window to center
  $(id).css('top', winH / 2 - $(id).height() / 2);
  $(id).css('left', winW / 2 - $(id).width() / 2);

  //transition effect
  $(id).fadeIn(2000);

  //if close button is clicked
  $('.window .close').click(function(e) {
    //Cancel the link behavior
    e.preventDefault();

    $('#mask').hide();
    $('.window').hide();
  });

  //if mask is clicked
  $('#mask').click(function() {
    $(this).hide();
    $('.window').hide();
  });

});

#mask {
  position: absolute;
  left: 0;
  top: 0px;
  width: 100% !important;
  height: 750px !important;
  z-index: 9000;
  background-color: #fff;
  display: none;
}

#boxes .window {
  position: absolute;
  left: 0!important;
  top: 0px!important;
  width: 100%;
  height: 750px;
  display: none;
  z-index: 9999;
  padding: 20px;
  text-align: center;
}

#boxes #dialog {
  left: 0!important;
  top: 0px!important;
  width: 100%;
  height: 750px;
  padding: 10px;
  background-color: #ccc;
  font-family: 'Segoe UI Light', sans-serif;
  font-size: 15pt;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes">
  <div id="dialog" class="window">
    Your Content Goes Here
  </div>
  <div id="mask"></div>
</div>

需要添加更多文本以有效我的帖子，但所有人都说!!

Answer 1

您可以使用<iframe>显示外部URL中的内容。这不适用于每个URL，因为有些人会设置X-Frame-Options来禁止在<iframe>中嵌入页面。基本上，您将#dialog的HTML设置为<iframe>，并将src设置为您要显示的URL，例如：

$(id).html(`<iframe src="https://www.theonion.com/" frameborder="0" width="100%" height="100%" ></iframe>`);

这是一个例子：

$(document).ready(function() {

  var id = '#dialog';
  
  $(id).html(`<iframe src="https://www.theonion.com/" frameborder="0" width="100%" height="100%" ></iframe>`);

  //Get the screen height and width
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();

  //Set heigth and width to mask to fill up the whole screen
  $('#mask').css({
    'width': maskWidth,
    'height': maskHeight
  });

  //transition effect
  $('#mask').fadeIn(500);
  $('#mask').fadeTo("slow", 0.9);

  //Get the window height and width
  var winH = $(window).height();
  var winW = $(window).width();

  //Set the popup window to center
  $(id).css('top', winH / 2 - $(id).height() / 2);
  $(id).css('left', winW / 2 - $(id).width() / 2);

  //transition effect
  $(id).fadeIn(2000);

  //if close button is clicked
  $('.window .close').click(function(e) {
    //Cancel the link behavior
    e.preventDefault();

    $('#mask').hide();
    $('.window').hide();
  });

  //if mask is clicked
  $('#mask').click(function() {
    $(this).hide();
    $('.window').hide();
  });

});

#mask {
  position: absolute;
  left: 0;
  top: 0px;
  width: 100% !important;
  height: 750px !important;
  z-index: 9000;
  background-color: #fff;
  display: none;
}

#boxes .window {
  position: absolute;
  left: 0!important;
  top: 0px!important;
  width: 100%;
  height: 750px;
  display: none;
  z-index: 9999;
  padding: 20px;
  text-align: center;
}

#boxes #dialog {
  left: 0!important;
  top: 0px!important;
  width: 100%;
  height: 750px;
  padding: 10px;
  background-color: #ccc;
  font-family: 'Segoe UI Light', sans-serif;
  font-size: 15pt;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes">
  <div id="dialog" class="window">
    
  </div>
  <div id="mask"></div>
</div>