質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

5114閲覧

scriptタグの参照先を変更したい

ukeyshima

総合スコア7

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2017/12/11 19:39

編集2017/12/12 02:50

###前提・実現したいこと
たとえば,

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属性先に指定する,と言った流れを想像しています
最終的にコードはダウンロードできるようにしたいので,できるだけ普通のエディタで書く記述と同じように記述はできるようにしたいです

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/12/12 01:03

実行しないスクリプトに書き換える理由の部分を具体的に質問文に追記してください。
guest

回答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属性をテキスト操作で書き換えた上でiframedocumentに書き込めばよかろうと.

NOTE:iframe要素にsrc属性が設定されている場合は, createElementメソッドで新たなiframeを生成して元の要素と入れ替えれやれば上手く行くんじゃないかと.

投稿2017/12/12 02:09

編集2017/12/12 02:16
defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ukeyshima

2017/12/12 02:58

String.replace()で文字列のまま置換してしまうという方法ですね....? 一応もしsrc先だけじゃなく,なんかしらの目的で同じように書かれていたらそれも置換してしまう気もして理想とまではいかないのですが,最後の手段として考えさせていただきます...... ありがとうございました
defghi1977

2017/12/12 03:11

追記の内容を見るに, 私の回答では問題が解決していない気がします. 多分HTMLをDOMParserでdocumentオブジェクト(DOMツリー)化する→DOMツリー内のscript要素を検索し, そのsrc属性を見て対応するJavaScriptソースを挿入→outerHTMLでDOMツリーをHTMLに変換し, iframeにdocument.write(その前にiframe内のドキュメントを破棄)ってな感じですかね? なんか色々実現方法がありそうな気がします.
ukeyshima

2017/12/12 03:24

少し試してみていますが,DOMParserは構文解釈をするだけで実行はされない.....?と言った感じでしょうか 行けそうな気がしています.....!もしできたらベストアンサーにさせていただきます!ありがとうございました!
defghi1977

2017/12/12 03:32

DOMParserはHTMLをDOMツリーに展開するだけで, 中のscript要素内のスクリプトはwindow.documentにアタッチされるまで実行されません. なお, iframe内での任意スクリプト実行はセキュリティ的に気になります(sandbox?).
ukeyshima

2017/12/13 15:55

DOMParserを使用した後にcreateURLでURL化したものをiframeのURL先にすることで求めていた実装をすることができました ありがとうございました!
guest

0

ソースをiframe経由で書き換えるという処理でしょうか?
自分自身ならともかく他のソースとなると
セキュリティの絡みもあるので今のブラウザでは無理だと思います

加えて、書き換えることによってどのような期待しているかわからないので
なんともいえませんが、書き換えたからと言って魔法のような
便利な効果が得られるとは思えませんので、別の手段で対応を
検討されたほうが良いと思います。

投稿2017/12/12 01:16

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ukeyshima

2017/12/12 03:00

目的を追記させていただきましたが,一応自分自身のコードとなっております もし何か良い方法がおありでしたらお願いします.....!
guest

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

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ukeyshima

2017/12/13 15:57

周りにも聞いたところ,codepenなどを参考にしろとは言われました..... とりあえず自分なりの実装ができたので満足しています.回答ありがとうございました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問