在iframe中運行Javascript/jQuery

我目前正在開發一個網頁編輯器，您可以在其中輸入HTML，CSS和JavaScript代碼並實時查看結果。類似於JSBin或JSFiddle。（我這樣做得到一個離線編輯器）在iframe中運行Javascript/jQuery

我已經經歷了很多問題，特別是當涉及到CSS，但我解決了他們通過使用iframe並注入我的所有代碼。而且，直到你輸入一些JavaScript之前，這種方法非常好。

我發送<script></script>之間的代碼，但不像CSS，它不會運行。奇怪的是，當我輸入$('button').css('color', 'red');之類的東西時，編輯器的按鈕會受到影響，但不會影響我的iframe。與我所期望的完全相反。我已經嘗試了很多東西，看了很多論壇上的主題，但沒有任何作用。我也嘗試在我的iframe中加載一個空白頁面。在這種情況下，JavaScript會運行，但無法編輯iframe中的代碼！這是怎麼回事？我哪裏錯了？預先感謝您的幫助！

這裏是我的編輯：https://jsbin.com/tuqite/edit?html,js,output/

來源

2016-04-15 Robin Dos Anjos

請參閱http://stackoverflow.com/questions/22740665/using-textareas-to-display-live-results-in-iframe-using-jquery-add-separate-te – guest271314

呃..它並不真正幫助... –

js代碼在父代中運行，這就是爲什麼它影響編輯器的按鈕。 – rajesh

嘗試更新這樣的iframe的內容。

// this string contains both html and script 
var html_string= "content"; 
document.getElementById('childFrame').src = "data:text/html;charset=utf-8," + escape(html_string);

通過直接更新iframe DOM的方式可能不是正確的方式。

來源

2016-04-15 16:22:18 rajesh

太棒了。簡單而有效。非常感謝你！：D –

非常歡迎。感謝接受：） – rajesh

在iframe中運行Javascript/jQuery

回答

相關問題