2013年08月08日

2013 08.08 Thu


ブログパーツなどscriptタグで出力したい場合、document.write()で書くと、とても楽チンなのですが、DOM構築をブロックさせてしまう問題が残ります。

そこで、document.write()の代替案として思い浮かんだ方法が以下の2つ。

1.idを付属させる
<div id="hoge"></div>
<script src="parts.js"></script>

idありきなら、js内で
var nn=document.getElementById('hoge');
nn.innerHTML='<p>書き出したい内容</p>';

みたいな感じで動的に出力が可能です。
これが一番簡単なのですが、表示させたいページ全てにidタグの記述が必要になります。

しかし、今回はscriptタグのみが前提なので、
ここからが本題です。


2.自身のscript要素を取得し、insertBeforeで直前に書き出す
var nn=document.createElement('div'); //外枠としてdivタグを出力させる
nn.innerHTML='<p>書き出したい内容</p>'; //外枠div内に内容を吐き出す
var s=document.getElementsByTagName('script');
var cc=s[s.length-1];
cc.parentNode.insertBefore(nn, cc);

DOMは記述された順に構築され、script要素はそれが記述された場所で実行されます。そのためDOM構築中の最後のscript要素が、それを実行しているscript要素自身となります。

ちなみに、nn.innerHTMLで<style>〜</style>とスタイルシートを記述したのですが、
Firefoxでは上手くいきましたがIEでは書き出されませんでした。
(<div style="〜">で解決しました。)


注意
スクリプト内でducument.writeを使用していると、エラーになり表示されません。

[Script][jQuery]document.writeを動的に読み込ませる方法

お疲れさまでした。
参考になりましたらソーシャルメディアで共有してくださいませ。
posted by こさめ
edit  re
カテゴリ
インターネット>ブラウザ・WEBメール(24)
インターネット>Firefoxアドオン、設定(15)
インターネット>Proxomitronフィルター(32)
インターネット>ブログ、WEBサービス(53)
インターネット>アフィリエイト・ポイントサイト(27)
インターネット>楽天、ポイントあれこれ(5)
インターネット>Windows最適設定(32)
インターネット>インターネット設定(17)
インターネット>デスクトップ改造・拡張(7)
インターネット>セキュリティソフト(6)
ブログカスタマイズ>カテゴリー、記事一覧系(38)
ブログカスタマイズ>jQuery(Script)文字系(23)
ブログカスタマイズ>CSS(Script)デザイン(28)
ブログカスタマイズ>ブログパーツ(7)
ブログカスタマイズ>携帯モバイル系(3)
ブログカスタマイズ>SEO・アクセスアップ(31)
マルチメディア>Brackets(5)
マルチメディア>画像系ソフト(6)
マルチメディア>DVD・動画プレイヤー(15)
マルチメディア>動画編集ソフト(6)
マルチメディア>音楽再生プレイヤー(16)
マルチメディア>ネットラジオ配信・編集(3)
マルチメディア>P2Pテレビソフト(4)
マルチメディア>おもしろ動画・感動動画(25)
デザイン>フリー素材 画像(5)
デザイン>HP・ブログ フリー素材(6)
デザイン>イラスト(非素材)(8)
デザイン>作詞作曲編曲MP3(5)
雑記>PC部品・音楽機材(7)
雑記>映画・アニメ・漫画・芸能(14)
雑記>どうでもいい雑学知識(6)
雑記>ゲーム(6)
雑記>スマホ・携帯電話(6)
雑記>カーナビ・ETC(3)
雑記>ネット銀行とか(2)
雑記>18禁?ちょいエロネタ(3)

 (C) 2006 - kosame All rights.