\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n##質問\r\nhtml要素のinnerHTMLを入れ替えると、新しいscriptタグ内の関数がうまく呼び出されなくなります。\r\n仕様でしたらそのようなドキュメントのありかを、またその回避策を知りたく思います。もし上記のコードであやしい箇所などありましたら、ご指摘いただきたく思います。\r\n\r\n##現状の動作\r\nGoogle Chromeで実行するとこのような画面が表示されます。\r\n![ブラウザ画面](5f7664e66f2e12770ee0e0793f4e89d9.png)\r\n[インライン?の場合]ボタンをクリックすると\"OK DESU\"、[入替前の関数]ボタンでは\"Okay\"とアラート表示されます。[入替後の関数]ボタンでは、show2関数の記述は無いので、反応はありません。\r\n[TEST]ボタンでは、html要素の中身がアラート表示されます。\r\n\r\nここで、[入替実行]ボタンをクリックすると、html要素のinnerHTMLの中身が入れ替わります。\r\n最初に入替前のhtml要素内のソースがアラート表示され、関数名show1がshow2に、\"OK DESU\"リテラルが\"OK KANA\"に変更され、この内容がアラート表示されたあと、html要素のinnerHTMLをこれに入れ替えます。\r\n\r\n![入れ替え前](16d35c6f0a74d3956efeae9f865e35ad.png)\r\n![入れ替え後](2fb943a6a35b2c7a3b8a0dd2fe9449e1.png)\r\n\r\n入替後、[TEST]ボタンをクリックすると、html要素の中身が入れ替わっていることが確認できます。そして、[インライン?の場合]ボタンをクリックすると、こんどは\"OK KANA\"と表示されるようになります。\r\nしかし、[入替後の関数]ボタンをクリックしても\"Okay\"とアラート表示がされません。\r\nデバッガで確認すると、\"show2 is not defined\"と表示されます。\r\n\r\n![エラー内容](c6d18a0b174e94bdd25e9adeb6569e8b.png)\r\n\r\n※理由があって、単一のHTMLファイルにすべてを詰め込む必要があり、jsファイルへ分離することができません。\r\n\r\n宜しくお願い致します。","answerCount":1,"upvoteCount":0,"datePublished":"2015-11-13T09:07:17.394Z","dateModified":"2015-11-13T09:08:21.434Z","acceptedAnswer":{"@type":"Answer","text":"> the following scripts will not execute: ...... scripts in DOMParser-created documents ......\r\n[4.11 Scripting — HTML5](http://www.w3.org/TR/html5/scripting-1.html#script-processing-noscript)\r\n\r\n> Parse str with an HTML parser, and return the newly created document.\r\n> The scripting flag must be set to \"disabled\". \r\n[DOM Parsing and Serialization](http://www.w3.org/TR/DOM-Parsing/#widl-DOMParser-parseFromString-Document-DOMString-str-SupportedType-type)\r\n\r\n\r\n\r\n#####追記\r\n回避策を書くの忘れてました。\r\n```javascript\r\nfunction replace()\r\n{\r\n var data = document.scripts[0].innerHTML;\r\n var script = document.createElement('script');\r\n script.appendChild(document.createTextNode(data.replace(/sho[w]1/g,\"show2\").replace(/OK\\sDESU/g,\"OK KANA\")));\r\n document.body.appendChild(script);\r\n}\r\n```\r\nこんなのはどうですか?","dateModified":"2015-11-13T11:42:13.287Z","datePublished":"2015-11-13T10:15:31.438Z","upvoteCount":1,"url":"https://teratail.com/questions/20072#reply-31472"},"suggestedAnswer":[],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"Chromeに関する質問","url":"https://teratail.com/tags/Chrome"},{"@type":"ListItem","position":3,"name":"Chrome","url":"https://teratail.com/tags/Chrome"}]}}}
質問するログイン新規登録
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3527閲覧

<html>.innerHTMLを置き換えた場合のscript内の関数

hsk

総合スコア728

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2015/11/13 09:07

編集2015/11/13 09:08

0

1

お世話になっております。
HTML文書で、自分自身のHTMLコードを変更するJavaScriptコードを作成しています。
次のようなHTML文書を作成しました。
IEやFirefoxではinnerHTMLへの代入がうまくいかないので、現在のところは Google Chromeで実行することを想定しています。

##コード

html

1<html> 2<head> 3<!-- META など省略 --> 4<script type="text/javascript" defer='defer'> 5function show1() 6{ 7 alert("Okay"); 8} 9 10function replace() 11{ 12 var elm = document.getElementsByTagName('html')[0]; 13 var htmlHTML = elm.innerHTML; 14 alert(htmlHTML); 15 16 var newHtmlHTML = htmlHTML.replace(/sho[w]1/g,"show2").replace(/OK\sDESU/g,"OK KANA"); 17 alert(newHtmlHTML); 18 elm.innerHTML = newHtmlHTML; 19} 20</script> 21</head> 22<body> 23<button onclick="alert('OK DESU');">インライン?の場合</button> 24<button onclick="show1();">入替前の関数</button> 25<button onclick="show2();">入替後の関数</button> 26<button onclick="replace();">入替実行</button> 27<button onclick="alert(document.getElementsByTagName('html')[0].innerHTML);">TEST</button> 28</body> 29</html>

##質問
html要素のinnerHTMLを入れ替えると、新しいscriptタグ内の関数がうまく呼び出されなくなります。
仕様でしたらそのようなドキュメントのありかを、またその回避策を知りたく思います。もし上記のコードであやしい箇所などありましたら、ご指摘いただきたく思います。

##現状の動作
Google Chromeで実行するとこのような画面が表示されます。
ブラウザ画面
[インライン?の場合]ボタンをクリックすると"OK DESU"、[入替前の関数]ボタンでは"Okay"とアラート表示されます。[入替後の関数]ボタンでは、show2関数の記述は無いので、反応はありません。
[TEST]ボタンでは、html要素の中身がアラート表示されます。

ここで、[入替実行]ボタンをクリックすると、html要素のinnerHTMLの中身が入れ替わります。
最初に入替前のhtml要素内のソースがアラート表示され、関数名show1がshow2に、"OK DESU"リテラルが"OK KANA"に変更され、この内容がアラート表示されたあと、html要素のinnerHTMLをこれに入れ替えます。

入れ替え前
入れ替え後

入替後、[TEST]ボタンをクリックすると、html要素の中身が入れ替わっていることが確認できます。そして、[インライン?の場合]ボタンをクリックすると、こんどは"OK KANA"と表示されるようになります。
しかし、[入替後の関数]ボタンをクリックしても"Okay"とアラート表示がされません。
デバッガで確認すると、"show2 is not defined"と表示されます。

エラー内容

※理由があって、単一のHTMLファイルにすべてを詰め込む必要があり、jsファイルへ分離することができません。

宜しくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

the following scripts will not execute: ...... scripts in DOMParser-created documents ......
4.11 Scripting — HTML5

Parse str with an HTML parser, and return the newly created document.
The scripting flag must be set to "disabled".
DOM Parsing and Serialization

#####追記
回避策を書くの忘れてました。

javascript

1function replace() 2{ 3 var data = document.scripts[0].innerHTML; 4 var script = document.createElement('script'); 5 script.appendChild(document.createTextNode(data.replace(/sho[w]1/g,"show2").replace(/OK\sDESU/g,"OK KANA"))); 6 document.body.appendChild(script); 7}

こんなのはどうですか?

投稿2015/11/13 10:15

編集2015/11/13 11:42
Lhankor_Mhy

総合スコア37634

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

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

hsk

2015/11/13 12:08

有難う御座います。 仕様によって、無効状態にされてしまうのですね。 (安全のためかとは思いますが、ボタンなどの要素を取り込ませたとき、onclickなどの イベントコードは問題なく動いてしまうのが何とも... var newHtmlHTML = htmlHTML.replace(/sho[w]1[(][)]/g,"alert('SAMPLE')"); に変えたりすると、反映されますし...)
hsk

2015/11/13 12:44

どうも有り難う御座います。 実は、自分自身に frameset と複数のframeを作成して、自分自身のもとの内容をそれぞれのframeに書き込む...という動作をさせようとしていました。 <html> <head> <script> function Duplicate() { var htmlElement = document.getElementsByTagName('html')[0]; var originalHtml = htmlElement.innerHTML; htmlElement.innerHTML = '<frameset cols="30%,30%,*"><frame></frame><frame></frame><frame></frame></frameset>'; for(var ii = 0; ii < window.parent.frames.length; ii++){ var wnd = window.parent.frames[ii]; wnd.document.getElementsByTagName('html')[0].innerHTML = originalHtml; } } </script> </head> <body> <h2>どうかな?<h2> <button onclick="Duplicate();">Duplicate me</button> </body> </html> ご教示いただいた回避手段を活用してみます。
hsk

2015/11/16 03:39

お陰様で出来ました!感謝します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問