javascript - IFRAME 内の jQuery Mobile

Question

JQuery Mobile を iframe 内で動作させようとしています。iframe の head セクション内に外部スクリプトをロードする onload 関数を開始しました。また、スクリプトが読み込まれたかどうかを確認するためのボタンも含めました。

何らかの理由で、スクリプトが何かにハングアップしているかのように、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();

///