如何在點擊時加載iframe塊？

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塊。 我該如何更改腳本呢？ 有什么建議？ :)

Answer 1

您可以使用：

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

不允許跨來源的請求

Answer 2

更新

我提供的代碼段很簡單，所以我假設你測試它時，你要么錯過了一些代碼，要么放錯了順序，否則你的網站會以某種方式干擾。

所以我所做的是使主頁面（ 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> 

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的打開/關閉狀態