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

お世話になっております。
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ファイルへ分離することができません。

宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

行動規範の内容に同意します