IFRAME中的jQuery Mobile

Question

I'm trying to get JQuery Mobile working inside an iframe. 我正在尝试使JQuery Mobile在iframe中工作。 I initiated an onload function to load the external scripts inside the head section of the iframe. 我启动了onload函数，以将外部脚本加载到iframe的头部。 I also included a button to see if the scripts loaded. 我还包括一个按钮，以查看脚本是否已加载。

For some reason the ajax loader just keeps spinning and spinning as if the script is hung up on something. 由于某种原因，ajax加载器只会不断旋转，就像脚本挂在某些东西上一样。

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

Something wrong here...Also, How do i declare a !DOCTYPE inside an iframe? 这里出了点问题...此外，如何在iframe中声明！DOCTYPE？

HTML 的HTML

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

Javascript Java脚本

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

// //

Answer 1

You can frame up a page that is all set up to have things inserted https://stackoverflow.com/a/11546242/2033671 您可以构建一个页面，该页面全部设置为插入东西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>

Then on the page you want to puts with you can have 然后在您要放入的页面上可以

 <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/ http://jsfiddle.net/pz4uH/14/

The only real benefit I see to doing it this way instead of inside a div is that you don't have to have any javascript libraries on the page that is loading up the framed page. 我看到的是这样做（而不是在div内）的唯一真正好处是，不必在正在加载框架页面的页面上有任何javascript库。 Though if you're already using jQuery in the parent page might as well load up JQM and put the output in a div 尽管如果您已经在父页面中使用jQuery，那么最好加载JQM并将输出放在div中

IFRAME中的jQuery Mobile

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-06-19 19:55:48

IFRAME中的jQuery Mobile

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-06-19 19:55:48

解决方案1
1 已采纳 2013-06-19 19:55:48