新ブログ「ごんフラブログG2」

WordPressで始めてみました

[海外]バンドルされた複数のゲーム・PCアプリが購入できるサイト
humblebundle.com


ごんたろうのぼやきトップ

2018年06月19日

[JavaScript]document.writeの代替え

━━━━━━━━━━
■2018/06/23 追記
scriptタグなんかがhead内で動作しなかったので
完全なdocument.writeの代替えとしては成立しない気がする。

━━━━━━━━━━
document.writeはHTML5では非推奨とのことで

代替え処理を調べていたら
innerHTMLを使おうってな事になったのは良いんだけど
多くはid指定して・・・な感じ。
それではdocument.writeの代替えにはならないのでは?
と思ったのでさらに調べてみたら
良い感じのサンプルを公開されている方が
いらっしゃったので、関数化していじってみた。

勝手にブログカスタマイズ さんのページ
http://blog12345.seesaa.net/article/371431098.html


<script type="text/javascript">
function newDocumentWrite(str){
var e_ele=document.createElement('div');
e_ele.innerHTML=str;
var s=document.getElementsByTagName('script');
var sco=s[s.length-1];
sco.parentNode.insertBefore(e_ele, sco);
}
</script>
<script type="text/javascript">
newDocumentWrite(表示する文字列);
</script>


コレでOK。
(全角<>は半角に直してくださいね。)
さらに下記のようにコードを追加したら
固定されたクラス、もしくは引数を増やして
任意のクラスも付加できるようになる


function newDocumentWrite2(str){
var e_ele=document.createElement('div');
e_ele.innerHTML=str;
e_ele.classList.add('sample_class');
var s=document.getElementsByTagName('script');
var sco=s[s.length-1];
sco.parentNode.insertBefore(e_ele, sco);
}
function newDocumentWrite3(str,cls){
var e_ele=document.createElement('div');
e_ele.innerHTML=str;
e_ele.classList.add(cls);
var s=document.getElementsByTagName('script');
var sco=s[s.length-1];
sco.parentNode.insertBefore(e_ele, sco);
}


しかし、newDocumentWrite3を使用する場合classの引数を
投げてやらなかった場合の処理も追加しておくと吉かと。



function newDocumentWrite3(str,cls=""){
var e_ele=document.createElement('div');
e_ele.innerHTML=str;
if(cls != ""){
e_ele.classList.add(cls);
}

var s=document.getElementsByTagName('script');
var sco=s[s.length-1];
sco.parentNode.insertBefore(e_ele, sco);
}





以上です。
posted by ごんたろう(Gontaro-Soft) at 17:00 | Comment(0) | 備忘録/お知らせ
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
ブログランキング・にほんブログ村へ
にほんブログ村

インターネット・コンピュータランキング