【问题标题】：How to only load iframe block when clicking on it?单击时如何仅加载 iframe 块？
【发布时间】：2016-02-07 06:32:30
【问题描述】：

我已经尝试找出实际操作方法，但代码总是不同，没有任何效果。我总是最终破坏链接或弹出窗口本身。所以，我在这里得到了这段代码：

.popup {
    position:fixed;
    display:none;
    top:0px;
    left:0px;
    width:100%;
    height:100%;}

#displaybox {
    width:460px;
    margin:50px auto;
    background-color:#000000;}

.displaybox {
    display:block;
    position:relative;
    overflow:hidden;
    height:800px;
    width:550px;}

.displaybox iframe {
    position:absolute;}


<link><a id="object">click link</a></link>

<script>
$(function(){
   $("link a").click(function(){
      id = $(this).attr("id");
      $(".popup:not(."+id+")").fadeOut(); $(".popup."+id).fadeIn();
   });
   $("a.close").click(function(){
      $(".popup").fadeOut();
   });
});
</script>

<div class="popup object">
    <div id="displaybox"><a class="close">x</a>
<br>
<div class="displaybox"><iframe src="{theiframeblock}" height="800" frameborder="0" width="550"></iframe></div>
</div>

我只想在点击“点击链接”链接时加载 iframe 块。我该如何为此更改脚本？有什么建议么？ :)

【问题讨论】：

标签： javascript html css iframe popup

【解决方案1】：

更新

我提供的 sn-p 非常简单，所以我假设你在测试它时，要么错过了一些代码，要么把东西放错了顺序，或者你的网站受到了某种干扰。

所以我所做的就是将主页 (index.html) 设置为具有独立运行所需的一切。我还制作了第二页 (target.html)，它是驻留在 iframe 中的测试页。

这是DEMO

通过以下方式简化您的功能：

为您的弹出窗口提供一个 ID #tgt
删除了<link> 元素；它不是锚<a> 它基本上是用于外部样式表
给每个锚点一个空的href属性
在每个点击函数中放置e.preventDefault()，以避免<a>默认跳转到某个位置的行为。
将 iframe 的 src={..} 模板替换为根目录，您可以将其更改回来，我只是这样做了，以便演示可以运行。

$(function() {
  $("a.open").click(function(e) {
      $('#tgt').fadeIn();
      e.preventDefault();
  });
  
  $("a.close").click(function(e) {
    $("#tgt").fadeOut();
      e.preventDefault();
  });
});

.popup {
  position: fixed;
  display: none;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#displaybox {
  width: 460px;
  margin: 50px auto;
  background-color: #000000;
}
.displaybox {
  display: block;
  position: relative;
  overflow: hidden;
  height: 800px;
  width: 550px;
}
.displaybox iframe {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="" id="object" class="open" target="tgt">click link</a>



<div id="tgt" class="popup object">
  <div id="displaybox"><a href="" class="close">X</a>
    <br>
    <div class="displaybox">
      <iframe src="/" height="800" frameborder="0" width="550"></iframe>
    </div>
  </div>

【讨论】：

您好，非常感谢！ c: 我按照您的指示修改了代码，但是 iframe 页面仍然与主页面同时加载。我的意思是问是否有办法在打开链接时只加载 iframe 块？脚本中还有什么需要更改的吗？
非常欢迎您。我帖子上的 sn-p 会自动加载 iframe 吗？我有一个更新供您查看，如果它对您有用，请不要忘记单击我帖子上的绿色复选标记（如果它真的对您有帮助，您也可以为我的帖子投票）;-) 如果它没有行不通，请告诉我，但我 99.9% 确信这次更新很好。

【解决方案2】：

你可以使用：

$("#object").click(function() { 
   $("iframe").attr("src", "http://www.your-url.com");     
});

不允许跨域请求

【讨论】：

【解决方案3】：

你可以使用 jQuery 轻松做到这一点

试试这个 - https://jsfiddle.net/van06539/

HTML-

<a href="#" id="openFrame">Click Link</a>
<div id="iFrameContainer">
  <iframe src="http://www.bbc.com" id="bestIframeEver" height="600" width="300" style="display:none;">

  </iframe>
</div>

Javascript -

var isOpened = false;

$(document).ready(function() {
  $("#openFrame").click(function() {
    if (!isOpened) {
      $("#bestIframeEver").fadeIn(1000);
    } else {
      $("#bestIframeEver").fadeOut(1000);
    }
    isOpened = !isOpened;
  });
});

您可以切换 iframe 的打开/关闭状态

【讨论】：