Javascript IFRAME内部的jQuery Mobile_Javascript_Jquery_Html_Iframe_Onload

Javascript IFRAME内部的jQuery Mobile

javascript jquery html iframe

Javascript IFRAME内部的jQuery Mobile,javascript,jquery,html,iframe,onload,Javascript,Jquery,Html,Iframe,Onload,我试图让JQuery Mobile在iframe中工作。我启动了一个onload函数，在iframe的head部分中加载外部脚本。我还包括一个按钮，以查看脚本是否已加载出于某种原因，ajax加载程序一直在旋转，好像脚本挂起了什么东西下面是JSFIDLE：这里有点不对劲……还有，我该如何申报一个！iframe中的DOCTYPE HTML //您可以构建一个页面，该页面已全部设置为插入内容 MutationObserver=window.MutationObserver | | windo

我试图让JQuery Mobile在iframe中工作。我启动了一个onload函数，在iframe的head部分中加载外部脚本。我还包括一个按钮，以查看脚本是否已加载

出于某种原因，ajax加载程序一直在旋转，好像脚本挂起了什么东西

下面是JSFIDLE：

这里有点不对劲……还有，我该如何申报一个！iframe中的DOCTYPE

HTML

您可以构建一个页面，该页面已全部设置为插入内容


MutationObserver=window.MutationObserver | | window.webkit MutationObserver；
var observer=新的突变观察者（功能（突变，观察者）{
//当突变发生时激发
$（“#leOutput”）.trigger（“pagecreate”）；
// ...
});
//定义观察者应观察的元素
//什么样的突变会触发回调
观察（文件）{
子树：对，
属性：正确，
儿童名单：是的，
characterData:true，
属性值：true，
characterDataOldValue:true
});

然后在你想放的页面上

 <html>
 .... 
 function doThis() {
     var myIframe = document.getElementById("themagic");
     var content = myIframe.contentWindow.document.getElementById('leOutput');    
     var btn = myIframe.contentWindow.document.createElement('button');
     btn.innerHTML = 'Click Me';
     content.appendChild(btn);    
     }
  window.onload = doThis();
 ....
<iframe id='themagic' src="bootstrap page outlined aboce"></iframe>


.... 
函数doThis（）{
var myIframe=document.getElementById（“themagic”）；
var content=myIframe.contentWindow.document.getElementById（'leOutput'）；
var btn=myIframe.contentWindow.document.createElement（'button'）；
btn.innerHTML='单击我'；
内容。附加子项（btn）；
}
window.onload=doThis（）；
....

我认为这样做而不是在div中的唯一真正好处是，在加载框架页面的页面上不必有任何javascript库。尽管如果您已经在父页面中使用jQuery，那么最好加载JQM并将输出放在div中，我会得到一个DOM安全性错误

Uncaught Error:SecurityError:DOM Exception 18

我可以问一下iframe的目标是什么吗？当您首先从主机页注入内容时，是否有任何理由要使用iframe？未来的DOM操作。我希望用户（在桌面上）看到他们的jQuery手机设计的外观。这个iframe代表他们的手机屏幕。你是在本地还是仅仅在JSFIDLE上有这个问题？有多少浏览器会支持MutationObserver？

function doThis() {
alert('onload works');

var myIframe = document.getElementById("themagic");

var link1 = myIframe.contentWindow.document.createElement('link');
link1.type = 'text/css';
link1.href = 'http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css';
link1.rel = 'stylesheet';
myIframe.contentWindow.document.head.appendChild(link1);

var scr1 = myIframe.contentWindow.document.createElement("script");
scr1.type = "text/javascript";
scr1.src = 'http://code.jquery.com/jquery-1.9.1.js';
myIframe.contentWindow.document.head.appendChild(scr1);

var scr2 = myIframe.contentWindow.document.createElement("script");
scr2.type = "text/javascript";
scr2.src = 'http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.js';
myIframe.contentWindow.document.head.appendChild(scr2);

var btn = myIframe.contentWindow.document.createElement('button');
btn.innerHTML = 'Click Me';
myIframe.contentWindow.document.body.appendChild(btn);    

}

window.onload = doThis();

<html>
    <head> 
    <!-- Load libraries in here -->
    <script>
        MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

        var observer = new MutationObserver(function(mutations, observer) {
       // fired when a mutation occurs
       $("#leOutput").trigger("pagecreate");
       // ...
       });

       // define what element should be observed by the observer
       // and what types of mutations trigger the callback
       observer.observe(document, {
             subtree: true,
             attributes: true,
             childList: true,
             characterData: true,
             attributeOldValue: true,
             characterDataOldValue: true
      });
    </script>
    </head>
    <body>
        <div id="leOutput" data-role="page"></div>
    </body>
</html>

 <html>
 .... 
 function doThis() {
     var myIframe = document.getElementById("themagic");
     var content = myIframe.contentWindow.document.getElementById('leOutput');    
     var btn = myIframe.contentWindow.document.createElement('button');
     btn.innerHTML = 'Click Me';
     content.appendChild(btn);    
     }
  window.onload = doThis();
 ....
<iframe id='themagic' src="bootstrap page outlined aboce"></iframe>