jQuery Mobile внутри IFRAME

Я пытаюсь заставить JQuery Mobile работать внутри iframe. Я инициировал функцию onload для загрузки внешних скриптов внутри раздела head iframe. Я также включил кнопку, чтобы проверить, загружены ли сценарии.jQuery Mobile внутри IFRAME

По какой-то причине загрузчик ajax просто держится и вращается, как будто скрипт что-то завис.

Вот jsFiddle: http://jsfiddle.net/pz4uH/9/

Что-то здесь не так ... Кроме того, Как я объявить DOCTYPE внутри 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();

источник

2013-06-19 Sanya

Я получаю ошибку безопасности DOM. 'Uncaught Error: SecurityError: DOM Exception 18' – teynon

Могу я спросить, какова цель iframe? – teynon

Есть ли причина, по которой вы хотите использовать iframe, когда вы вставляете контент с главной страницы в первую очередь? – m90

Вы можете подстраивать страницу, все готово, чтобы иметь вещи, вставленные 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-19 19:55:48

Какой процент браузеров действительно поддерживает MutationObservers? – m90

Спасибо! Отличная информация. – Sanya

Heres таблица текущей поддержки: http: //caniuse.com/#search=MutationObserver –

jQuery Mobile внутри IFRAME

ответ

Смежные вопросы