只在觸發後加載iframe

我想在其中打開一個'iframe'的彈出式窗口，但是當我打開網站時，它也會在iframe中加載網站（並且需要更多時間來加載網頁）。這是IFRAME代碼：只在觸發後加載iframe

<div id="popup1" class="ui-content"> 
    <a href="#myPopup" data-rel="popup" data-position-to="window">open</a> 
    <div data-role="popup" id="myPopup" width="100%" height="100%" data-overlay-theme="b"> 
      <p>This is my picture!</p> 
      <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> 
     <iframe width="100%" height="700em" name="iframe_pop" src="http://www.w3schools.com/"> 
      <p>Your browser does not support iframes.</p> 
     </iframe> 
    </div> 
    </div>

我怎麼能做出iframe的網站負載只有當我點擊「打開」鏈接？

來源

2015-04-07 hhgjgj

你的意思是使用按鈕點擊事件，然後加載iframe？ – tim

的JQM彈出插件提供的事件，包括afterOpen：http://api.jquerymobile.com/popup/#event-afteropen

您可以處理此事件，如果它尚未加載加載的iframe：

<div data-role="popup" id="myPopup" width="100%" height="100%" data-overlay-theme="b"> 
    <p>This is my picture!</p> <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> 
    <iframe width="100%" height="300px" name="iframe_pop" id="iframe_pop" src="about:blank"> 
     <p>Your browser does not support iframes.</p> 
    </iframe> 
</div> 


$("#myPopup").on("popupafteropen", function(event, ui) { 
    var $iframe = $("#iframe_pop"); 
    if ($iframe.prop("src") == 'about:blank'){ 
     $iframe.prop("src", "http://www.w3schools.com/"); 
    }   
});

工作DEMO

來源

2015-04-08 14:10:49 ezanker

爲什麼如果我更改網址爲例如http://www.reddit.com/或http://www.google.com/它不起作用？（你能幫助我另一件事嗎？：我怎麼可以改變iframe的高度和寬度，我試着用CSS，但只有寬度改變，而不是高度） – hhgjgj

@hhgjgj，使用.ui-popup-容器，通過CSS設置高度在iframe上或彈出：http://jsfiddle.net/ezanker/rpv77jzn/3/並非所有的網站都允許自己在框架內運行，因爲點擊問題。研究框架破壞。 – ezanker

非常感謝您的回答！ – hhgjgj

我假設你想要你的iframe加載單擊按鈕時。

首先設置你的iframe的源abut:blank

<iframe width="100%" height="700em" name="iframe_pop" src="about:blank">

在你body標籤的末尾添加script標籤。由於您提供了JQuery標籤，我認爲您熟悉Javascript。

<body> 
    ... 
    <script> 
     $("#myPopup").click(function(){ 
      $("iframe").attr("src", "http://www.w3schools.com/"); 
     }); 
    </script> 
</body>

來源

2015-04-07 23:43:28 tim

只在觸發後加載iframe

回答

相關問題