javascript - 如何仅在单击时加载 iframe block ？

Question

我已经尝试找出如何真正做到这一点，但代码总是不同，没有任何效果。我总是以破坏链接或弹出窗口本身而告终。所以，我在这里得到了这段代码:

.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 block 。我该如何为此更改脚本？有什么建议么？ :)

Answer 1

更新

我提供的片段非常简单，所以我假设您在测试它时，要么遗漏了一些代码，要么以错误的顺序放置了一些东西，或者您的网站以某种方式干扰了。

因此，我所做的是将主页 ( index.html) 设为包含其独立运行所需的一切内容。我还制作了第二页 ( target.html )，这是驻留在 iframe 中的测试页。

这是 DEMO

---

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

• 给你的弹窗一个id #tgt
• 删除了<link>元素;这不是 anchor <a>它基本上用于外部样式表
• 给每个 anchor 一个空的href属性
• 放置e.preventDefault()在每个点击功能中避免 <a>跳转到某个位置的默认行为。
• 替换了 iframe 的 src={..}带 Root过的模板，您可以将其改回原样，我只是这样做了，以便演示可以运行。

$(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>