Question

首先，这里首先是我的js

＆＃13;

$(document).ready(function(){

        $('<a>Launch</a>').attr({'href':'#popupBasic','data-rel':'popup','data-transition':'pop','class':'ui-btn ui-corner-all ui-shadow ui-btn-inline'}).appendTo('body')
        $("<div></div>").attr({'data-role':'popup', 'id':'popupBasic'}).appendTo('body')
        $('#popupBasic').html('<iframe src="http://www.example.org"></iframe>')
   });

＆＃13;

通过测试，我已将问题缩小到iframe。无论出于何种原因，我使用jQuery创建iframe并将其附加到它停止运行时的div。

我不确定为什么会这样。我已尝试使用如上所示的appendTo和.html两者都没有成功。

我的问题是，动态创建iframe的正确方法是什么，这将允许此代码按预期工作？

Answer 1

对于jQM，您应该附加到页面div而不是正文。页面如下所示：

<div data-role="page" id="page1">
     <div data-role="header">
        <h1>My page</h1> 
    </div>  
    <div role="main" class="ui-content" id="mainCont">
    </div> 
</div>

接下来而不是document.ready，使用像pagecreate这样的jQM页面事件。在将弹出窗口添加到页面之后，你需要告诉jQM通过调用.popup（）初始化小部件：

$(document).on("pagecreate","#page1", function(){   
    $('<a>Launch</a>').attr({'href':'#popupBasic','data-rel':'popup','data-transition':'pop','class':'ui-btn ui-corner-all ui-shadow ui-btn-inline'}).appendTo('#mainCont')
    $("<div></div>").attr({'data-role':'popup', 'id':'popupBasic'}).appendTo('#mainCont').popup();
    $('#popupBasic').html('<iframe src="http://www.example.org"></iframe>')
 });

正在使用 DEMO

jQuery mobile - 生成html动态不使用iframe

1 个答案: