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网站？

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

正在使用 DEMO

仅在触发后才加载iframe

2 个答案: