iframe内でJavascript/jQueryを実行

Question

私は現在、HTML、CSS、およびJavaScriptコードを入力してリアルタイムで結果を確認できるWebエディタを開発中です。 JSBinやJSFiddleと似たもの。

私はすでにCSSに関して多くの問題を経験していますが、iframeを使用してすべてのコードを注入することで解決しました。 JavaScriptを入力するまで、これはうまく機能します。

私は<script></script>の間でコードを送信しますが、CSSとは異なり、実行されません。非常に奇妙なのは、$('button').css('color', 'red');のようなものを入力すると、エディタのボタンが効果的に影響を受けますが、iframeのボタンには影響しないということです。私が期待していたのと正反対。私は多くのことを試みましたが、フォーラムでは多くのトピックを見ましたが、何も機能しません。私はまた、私のiframeに空白のページを読み込もうとしました。その場合、JavaScriptは動作しますが、iframeのコードを編集することは不可能になります！どうしたの？どこが間違っていますか？ご協力いただきありがとうございます！ここで

は私の編集者：https://jsbin.com/tuqite/edit?html,js,output/

Answer 1

は、このようなインラインフレームの内容を更新してください。

// 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を直接更新すると正しい方法ではない可能性があります。