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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在我的弹出式灯箱中添加外部链接相关的知识,希望对你有一定的参考价值。

在我的网站上,我想在一个框架中显示谷歌网站,但这是我的错误:拒绝在框架中显示,因为它将'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>

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

答案

您可以使用<iframe>显示外部URL中的内容。这不适用于每个URL,因为有些人会设置X-Frame-Options来禁止在<iframe>中嵌入页面。基本上,您将#dialoghtml设置为<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>

以上是关于在我的弹出式灯箱中添加外部链接的主要内容,如果未能解决你的问题,请参考以下文章

在框架/灯箱中打开链接

如何使用 JSONP 将外部 HTML 页面加载到灯箱中?

无法在弹出式灯箱上输入文本字段

灯箱显示乱码而不是图像

ajax 在运行脚本之前检查用户是不是登录

如何让 Paypal 购物车加载到灯箱中