仅在触发后加载 iframe

Question

我想制作一个带有 '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 网站仅在单击 "open" link 时加载？

Answer 1

我假设您希望在单击按钮时加载 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>

Answer 2

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/");
    }        
});

Working DEMO

仅在触发后加载 iframe

load iframe only after it triggered

html

iframe

jquery

jquery-mobile