JavaScriptのお勉強(4)
実験
(1)インラインでdocument.write
<script type="text/javascript">
document.write('HELLO WORLD');
</script>
(2)インラインでinnerHTML
<div id="jstest001"></div>
<script type="text/javascript">
document.getElementById('jstest001').innerHTML = 'HELLO WORLD';
</script>
(3)上の(1)を外部スクリプト化（同期）
<script type="text/javascript" src="https://pandaignis.com/wp/js/jstest001_sc1.js"></script>
(4)上の(2)を外部スクリプト化（同期）
<script type="text/javascript" src="https://pandaignis.com/wp/js/jstest001_sc2.js"></script>
(5)上の(1)を外部スクリプト化(非同期)
<script type="text/javascript" src="https://pandaignis.com/wp/js/jstest001_sc1.js" async></script>
※失敗しました
(6)上の(2)を外部スクリプト化(非同期)
<script type="text/javascript" src="https://pandaignis.com/wp/js/jstest001_sc3.js" async></script>
(7)document.writeを使ってdocument.writeを書き出させると（まずはインラインで）
※「'」と「"」の使い分けと「￥」の使用に注意（※</script>というタグが出てくるとそこでスクリプトが終わりだと解釈されて止まってしまうので、「/」をエスケープしている。）
<script type="text/javascript">
document.write('<script type="text/javascript">document.write("HELLO WORLD");<\/script>');
</script>
※document.writeの中身は改行できない。
ソースを改行させたい時は「+」を使う。
<script type="text/javascript">
document.write('<script type="text/javascript">'+
'document.write("HELLO WORLD");'+
'<\/script>');
</script>
結果は同じ
(8)document.writeで(2)を書き出させてみる（インライン）
<script type="text/javascript">
document.write('<div id="jstest001d"></div><script type="text/javascript">document.getElementById("jstest001d").innerHTML = "HELLO WORLD";<\/script>');
</script>
(9)innerHTMLで(1)を書き出させてみる（インライン）
<div id="jstest001e"></div>
<script type="text/javascript">
document.getElementById('jstest001e').innerHTML = '<script type="text/javascript">document.write("HELLO WORLD");<\/script>';
</script>
※失敗しているように見えますが、ソースを見てみると、ちゃんと書き出されています。ただ、scriptタグに挟まれているため見えない状態になってるわけですね。
<div id="jstest001e"><script type="text/javascript">document.write("HELLO WORLD");</script></div>
<script type="text/javascript">
document.getElementById('jstest001e').innerHTML = '<script type="text/javascript">document.write("HELLO WORLD");<\/script>';
</script>
※「innnerHTMLの中ではスクリプトは動かない」という仕様があるようです。
Note: When inserted using the document.write() method, script elements execute (typically synchronously), but when inserted using innerHTML and outerHTML attributes, they do not execute at all.注：document.write（）メソッドを使用して挿入すると、スクリプト要素は（通常は同期的に）実行されますが、innerHTMLおよびouterHTML属性を使用して挿入すると、まったく実行されません。
(https://ja.stackoverflow.com/questions/2756/)
(10)innerHTMLの中でスクリプトを動かすには
の前に、ちょっと整理してまとめ
- document.write は非同期では動かない
- innerHTMLにすれば非同期にできる
- innerHTMLの中ではスクリプトは動かない
さらにもうちょっとまとめ そもそも、何故「非同期が推奨」という話になったのか？
- 同期で外部スクリプトを読み込むとページ描画(レンダリング)が止まる
- スクリプトをDLする外部サーバーが重いと表示が止まったまま待たされる事になる
- 非同期読み込みならレンダリングが止まらない
- インラインのスクリプトはそもそも同期でしか動かない
これ、思ったのですが、いちいち内部のスクリプトを外部スクリプト化して非同期にすると、その数だけサーバーへのリクエスト回数は増えるのでは・・・ どうしても外部のコードをDLしてこなければならないものは仕方ないですが。 同一サーバー上だったらわざわざ外部化しなくても、スクリプトの読み込みを最後に回すという昔からあるテクニックと大差ないのでは？ 読み込んでくるデータ量は同じ、サーバーも同一、なら、リクエストが増えない分、インラインで記述して最後に回すほうが負荷は軽いってことになりますよね。 document.writeを使うとその都度レンダリングが止まりますが、innerHTMLみたいな、領域を先に描画しておいて、後からその中身を差し替えるのであれば、とりあえず表示は高速化できるような気がします。 昔は、「広告などをページが完成するより先にとにかく表示させたい」という事から、あえて最初に広告を読み込ませるような手法があったのかも知れませんが、読み込みが遅くなる＝検索ランキングが下がる＝アクセス数が下がって結局広告収益が下がる、という現状では、広告は後から読み込ませてもいいわけですよね。 大体広告をクリックするのは、記事を読み終わった後だと思いますので、読んでいる間に描画されていれば良いわけですからね。 ということは、フッター（理想は</body>タグの直前）でスクリプトを実行、領域のinnerHTMLを置き換えるのが良いでFAな気がします。
ということで、本題に戻りますが、innerHTMLの中でスクリプトを動かす方法は・・・ 現時点では「ない」という結論に(笑) 現段階では、私にはうまくできませんでした。 引き続き勉強し続ける予定ではありますが、もしかしたら、「ない」でＦＡなのかも・・・？ document.writeであれば、スクリプトをテキストで書き出してやれば実行されますが、innerHTML系のやり方では、どうやっても単なるテキストになってしまって実行されない。。。orz 検索すると、
var hoge = document.createElement('script')
script.innerHTML = 実行したいスクリプト ;
document.getElementByID('area1').appendChild(hoge);
みたいにやればできるというような解説がたくさんでてきますが、よく考えたらこれ、「innerHTML」じゃなくて「appendChild」を使いなさい、ってことで、innerHTMLではできません、という意味なような・・・？
試してみたら、たしかにこのやり方でスクリプトは動くのですが、残念ながら、Google Adsense のコードは、どうやっても動かないのです・・・
色々試してみての素人解釈ですが、createElement('script')の時点で<script>タグが生成されていて、その中に広告コードを入れると<script>タグの中に<script>タグがネストされてしまう事になるので問題なのかも？
・・・と思ったのですが、試してみたところ、<script>タグのネスト自体は、終了タグのエスケープさえうまくしてやれば実行できるようです。
なんとかコードをそのまま貼り付けて実行させる方法があればシンプルでわかりやすくて良いなぁと思うわけですが、どうにもできないので、一旦諦めます。
（今後も情報収集は続けますが…）
ただ、広告コード自体を、<script>タグを動的にcreateElement('script')で作り出す方法では、コードを実行すること（広告を表示させること）に成功しました。
このやり方は、下記サイトを参考にさせて頂きましたm(__)m
なにせ、出てくるコマンド、単語、全部分からないような状況なので、ひとつずつ、全部、検索しては勉強しの繰り返しだったので、色々勉強になりました(笑)
データセットに使う「キャメルケース」なんて言葉、初めて聞いた(^^;) 
コメント