如何仅在单击时加载 iframe 块？

Question

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

.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>

我只想在单击 "click link" link 时加载 iframe 块。我该如何为此更改脚本？有什么建议么？ :)

Answer 1

您可以使用：

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

不允许跨域请求

Answer 2

您可以使用 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 的打开/关闭状态

Answer 3

更新

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

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

这是DEMO

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

为您的弹出窗口指定一个 ID #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>

如何仅在单击时加载 iframe 块？

How to only load iframe block when clicking on it?

html

javascript

css

iframe

popup

更新