お世話になっております。
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/13 12:08
2015/11/13 12:44
2015/11/16 03:39