Q&A
実行しないスクリプトに書き換える理由の部分を具体的に質問文に追記してください。
###前提・実現したいこと
たとえば，
html
1<head> 2<script src="main.js"></script> 3</head> 4<body></body>
となっていて，この中のscriptタグの参照先をmain.jsからindex.jsに変更するのはどうすれば良いでしょうか......?
下記コードにありますが，これをiframe内で行いたい，といった質問です
###発生している問題・エラーメッセージ
jsは動的な書き換えはできず，一応document.getElementsByTagName("script")[0].src="index.js";で見かけの上では変更することはできますが，実際に中身が変わったわけではありません
また，今回目標としているのは"書き換え"であって"実行"ではないので，createElementなどで新たに作ることも目的ではありません
ただし，問題となるのはmain.jsが実行されてしまうという点ですので，例えばmain.jsが実行する前にremoveChildなどで消し，新たにcreateElementで上書きするというのはアリです
###該当のソースコード
javascript
1let iframe=document.createElement("iframe"); 2iframe.addEventListener("load",function(){ 3let html='<head><script src="main.js"></script></head>'; 4iframe.contentDocument.open(); 5iframe.contentDocument.write(html); 6iframe.contentDocument.close(); 7let script=iframe.contentDocument.getElementsByTagName("script")[0]; 8script.src="index.js"; 9});
###試したこと
一回読み込んでscriptタグの参照先を変更し，その際のhtml文書を変数に格納しておき，iframeを更新して再度読み込んだ後にその文書をdocument.writeで実行させる．と言ったことをやって見ました
見事変更したhtmlは実行されますが，その前に一回読み込んだことによって一度main.jsがやはり実行されてしまうというのが難点です
###追記
一応作成したい目標というのはブラウザ上で動作するhtmlやjavascriptのテキストエディタです
タブごとにhtmlやjavascriptを記述できて，最終的にhtmlはiframeで動作が確認できるようにしたいです
なので，html用のタブに書いたコードをdocument.writeでiframeに書き込み,javascript用のタブに書いたコードはfileReaderAPIでURL化した後に，記述したhtml内のscriptタグのsrc属性先に指定する，と言った流れを想像しています
最終的にコードはダウンロードできるようにしたいので，できるだけ普通のエディタで書く記述と同じように記述はできるようにしたいです
回答3件
0
ベストアンサー
詳しい意図がよく見えないのですが, おっしゃりたいことはこんな感じ？
HTML
1<!--main.htm--> 2<iframe id="iframe"></iframe> 3<script> 4"use strict"; 5{ 6 const req = new XMLHttpRequest(); 7 req.open("GET", "sub.htm"); 8 req.responseType = "text"; 9 req.onloadend = e => { 10 const html = req.response; 11 const doc = iframe.contentWindow.document; 12 doc.open(); 13 doc.write(html.replace(/"a.js"/, '"b.js"')); 14 doc.close(); 15 }; 16 req.send(); 17} 18</script>
HTML
1<!--sub.htm--> 2<script src="a.js"></script> 3<body> 4iframe内のコンテンツ 5</body>
JavaScript
1//a.js 2window.onload = e => document.body.insertAdjacentHTML("beforeEnd", "this is a");
JavaScript
1//b.js 2window.onload = e => document.body.insertAdjacentHTML("beforeEnd", "this is b");
iframe要素に表示したいコンテンツをAjaxでHTMLソースコードとして入手し, script要素のsrc属性をテキスト操作で書き換えた上でiframeのdocumentに書き込めばよかろうと.
NOTE:iframe要素にsrc属性が設定されている場合は, createElementメソッドで新たなiframeを生成して元の要素と入れ替えれやれば上手く行くんじゃないかと.
投稿2017/12/12 02:09
編集2017/12/12 02:16
総合スコア4756
String.replace()で文字列のまま置換してしまうという方法ですね....?
一応もしsrc先だけじゃなく，なんかしらの目的で同じように書かれていたらそれも置換してしまう気もして理想とまではいかないのですが，最後の手段として考えさせていただきます......
ありがとうございました
追記の内容を見るに, 私の回答では問題が解決していない気がします.
多分HTMLをDOMParserでdocumentオブジェクト(DOMツリー)化する→DOMツリー内のscript要素を検索し, そのsrc属性を見て対応するJavaScriptソースを挿入→outerHTMLでDOMツリーをHTMLに変換し, iframeにdocument.write(その前にiframe内のドキュメントを破棄)ってな感じですかね？
なんか色々実現方法がありそうな気がします.
少し試してみていますが，DOMParserは構文解釈をするだけで実行はされない.....?と言った感じでしょうか
行けそうな気がしています.....!もしできたらベストアンサーにさせていただきます！ありがとうございました！
DOMParserはHTMLをDOMツリーに展開するだけで, 中のscript要素内のスクリプトはwindow.documentにアタッチされるまで実行されません.
なお, iframe内での任意スクリプト実行はセキュリティ的に気になります(sandbox?).
DOMParserを使用した後にcreateURLでURL化したものをiframeのURL先にすることで求めていた実装をすることができました
ありがとうございました！
0
ソースをiframe経由で書き換えるという処理でしょうか？
自分自身ならともかく他のソースとなると
セキュリティの絡みもあるので今のブラウザでは無理だと思います
加えて、書き換えることによってどのような期待しているかわからないので
なんともいえませんが、書き換えたからと言って魔法のような
便利な効果が得られるとは思えませんので、別の手段で対応を
検討されたほうが良いと思います。
投稿2017/12/12 01:16
総合スコア118164
0
一応作成したい目標というのはブラウザ上で動作するhtmlやjavascriptのテキストエディタです
OSSにいくつかそういったものがあるので、それをカスタマイズしたりアルゴリズムを見たりしてみてはいかがでしょう。
【jsfiddleやJSBinのようにコードテストが出来るオープンソースソフトウェア・「CodeWich」 - かちびと.net】
http://kachibito.net/useful-resource/codewich
【jsFiddleのようにブラウザでJavaScriptを書いて動作を確認出来るOSS・「tmpltr」 - かちびと.net】
http://kachibito.net/useful-resource/tmpltr
【jsfiddleライクにブラウザ上でJavaScriptの動作テストができるオープンソースのソフトウェア・「Codemagic」 - かちびと.net】
http://kachibito.net/useful-resource/codemagic
投稿2017/12/12 16:57
総合スコア69643
周りにも聞いたところ，codepenなどを参考にしろとは言われました.....
とりあえず自分なりの実装ができたので満足しています．回答ありがとうございました
あなたの回答
tips
プレビュー
