更新

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>

我想只在点击＆＃34;点击链接＆＃34;时加载iframe块。链接。我该如何更改脚本呢？有什么建议？：）

Answer 1

您可以使用：

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

不允许跨源请求

Answer 2

更新

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

所以我所做的是使主页面（index.html）具有它自己需要的所有功能。我也创建了第二页（target.html），它是驻留在iframe中的测试页面。

这是DEMO

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

为您的弹出式广告标识#tgt
删除了<link>元素;它不是锚<a>它基本上是外部样式表
为每个锚提供了一个空的href属性
在每个点击功能中放置e.preventDefault()，以避免<a>跳转到某个位置的默认行为。
用root替换了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>

Answer 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的打开/关闭状态

如何在点击时加载iframe块？

3 个答案:

更新