0

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

出于某种原因，ajax 加载器只是不停地旋转，就好像脚本挂在什么东西上一样。

这是 jsFiddle：http: //jsfiddle.net/pz4uH/9/

这里出了点问题...另外，我如何在 iframe 中声明 !DOCTYPE？

HTML

<div id='main'>
  <div id='rightP'>
     <div id='theframe' class='phn'>
        <iframe id='themagic'>
        </iframe>
     </div>
  </div>
</div>

Javascript

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();

//

4

1 回答 1

1

您可以构建一个页面，该页面已全部设置为插入内容 https://stackoverflow.com/a/11546242/2033671

<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>

http://jsfiddle.net/pz4uH/14/

我看到这样做而不是在 div 中这样做的唯一真正好处是，您不必在加载框架页面的页面上拥有任何 javascript 库。虽然如果您已经在父页面中使用 jQuery，不妨加载 JQM 并将输出放入 div

于 2013-06-19T19:55:48.030 回答