jQuery Mobile inside IFRAME

Question

I'm trying to get JQuery Mobile working inside an iframe. I initiated an onload function to load the external scripts inside the head section of the 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.

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

Something wrong here...Also, How do i declare a !DOCTYPE inside an iframe?

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

//

I get a DOM security error. `Uncaught Error: SecurityError: DOM Exception 18 ` — teynon, Jun 19 '13 at 19:25
Is there any reason why you want to use an iframe when you are injecting the content from the host page in the first place? — m90, Jun 19 '13 at 19:27
Future DOM manipulation. I want the user to see (on desktop) how their jQuery Mobile design will look. This iframe represents their phone screen. — Sanya, Jun 19 '13 at 19:33
I saw the DOM error and uploaded to my site and still get the same error. — Sanya, Jun 19 '13 at 19:43
You might want to consider a different approach. If you're completely bent on using an iframe, maybe you should use an iframe the way it's meant to be implemented (ie, load a page with your preview in it.) I'm working on something similar (preview mobile device screen), but I was wrapping it into a div. — teynon, Jun 19 '13 at 19:45
Did you have a look at how it is handled with the [ThemeRoller](http://jquerymobile.com/themeroller/) then? They should be doing the same thing. — m90, Jun 19 '13 at 19:46
The security exception is quite possibly the fact that you are adding the jquery mobile. (Which is causing the security error.) Which is why this approach will be rough. Perhaps adding a local jquery mobile library will fix it, but likely you'll need to make the iframe an actual page. My div thing was different in concept. I'm not letting them control the body, html tags, etc. But we likely have different projects that both happen to be on mobile. — teynon, Jun 19 '13 at 19:58

score 1 · Accepted Answer · edited May 23 '17 at 12:21

You can frame up a page that is all set up to have things inserted 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/

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. Though if you're already using jQuery in the parent page might as well load up JQM and put the output in a div

What percentage of browsers out there will actually support MutationObservers? — m90, Jun 19 '13 at 19:58

jQuery Mobile inside IFRAME

1 Answers1