jQuery 移动 - 动态生成 html 不适用于 iframe

Question

这里首先是我的 js

$(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>')
   });

通过测试，我已将问题缩小到 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，使用 jQM 页面事件，如 pagecreate，并且在将弹出窗口添加到页面之后，您需要通过调用 .popup() 告诉 jQM 初始化小部件：

$(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>')
 });

Working DEMO

jQuery 移动 - 动态生成 html 不适用于 iframe

jQuery mobile - generating html dynamically not working with iframe

html

iframe

jquery

overlay

jquery-mobile