後からロードした外部JSファイルでdocument.writeする（１）
※1157010937の回答の3/4
ファイルの読み込み後にロードした外部JSファイルでdocument.writeするときの問題点を洗います。
【writer.js】
// document.writeする
var str = '<div style="background-color:orange;">外部JSファイルによって作成されたHTML要素です。</div>';
document.write(str);
// HTML側からのチェック用
function writer() {
alert("./writer.jsが読み込まれています。");
}
// ステータスバーでのチェック用
status += " Load!";
<html>
<head>
<script type="text/javascript"><!--
function viewSource(id) {
if(document.body) {
alert("ソースビュー " + id + "\n" + document.body.parentNode.innerHTML);
} else {
alert("ソースビュー " + id + "\n" + "<body>がまだ出現していない");
}
}
viewSource(0);
function test(str) {
document.writeln(str);
}
function writeScriptTag() {
test('<script type="text/javascript" src="./writer.js" charset="Shift_JIS"></' + 'script>');
}
function writeAfterLoad() {
test('あいう');
// writeScriptTag();
}
function writeInInnerHTML() {
// ↓擬似受信電文
var str = '<div>scriptタグの直前<script type="text/javascript" src="./writer.js" charset="Shift_JIS"><' + '/script>scriptタグの直後</div>';
document.getElementById("target").innerHTML = str;
}
viewSource(1);
test('<title>てすと</title>');
viewSource(2);
//--></script>
</head>
<body>
<div><input type="button" onclick="viewSource();" value="ソースチェック" /></div>
<hr />
※HTMLのタグを直接書いてある場合
<div>外部JSファイルの前</div>
<script type="text/javascript" src="./writer.js" charset="Shift_JIS"></script>
<div>外部JSファイルの後</div>
<hr />
※HTMLのタグをdocument.writeした場合
<script type="text/javascript"><!--
viewSource(10);
test('<div>外部JSファイルの前</div>');
viewSource(11);
writeScriptTag();
viewSource(12);
test('<div>外部JSファイルの後</div>');
viewSource(13);
//--></script>
<hr />
<div onclick="viewSource(20);writeAfterLoad();viewSource(21);">クリックでdocument.write();</div>
<hr />
<div onclick="viewSource(30);writeInInnerHTML();viewSource(31);">クリックで質問と同じ状況</div>
<div id="target" style="border:solid 1px black"></div>
</body>
</html>※このサンプルは、1157010937の回答の2/4のおさらいができるようになっているので、その部分の説明は省略します。
まず、HTMLのタグが直接書いてあり、外部JSファイルを読み込む<script>タグも直接書いてある場合は、外部JSファイルのdocument.writeも意図した場所に書かれています。
次に、外部JSファイルを読み込む<script>タグを、HTMLのロード中に他のタグと一緒にdocument.writeした場合、一緒に書いた他のタグの後に外部JSファイルのdocument.writeの内容が書かれています。
また、HTMLのロード後にdocument.writeするとページが変わってしまうのでNGです。
さらに、innerHTMLの中に<script>タグがあっても動作しません。
