document.writeがイベントタイミングによって挙動が違う

document.writeがイベントタイミングによって挙動が違う

JavaScriptをここ数年扱ってきているが、最近の流行言語で第2位まで上昇していたんですね。※

アメーバニュース

確かに採用面談していても、フロントエンジニアという言葉を、すごくよく聞くようになったし、希望する人も増えているようだ。

個人的には、デザイナーが、WEBページを動的にしたい為にjQueryを使うっていう人が多いように思えます。

JavaScriptは簡単か?

プログラマーにとって、コンパイル不要、ソース実行可能なインタプリタ言語は全般的に簡単な部類だと考えられています。しかし、環境構築の容易性、開発工程の短縮、ブラックボックス度合い、などから「簡単」と言っているだけで、

いざ製品開発に関わるとなると、実際は、非常に複雑な言語だと思ってます。

その中でも、「document.write」という仕様は、非常に便利なのですが、ともすると、予期せぬ障害を引き起こす危険のある命令であり、その挙動に複数の結果があるので注意事項としてメモしておきます。

簡単に説明

HTMLソース内の</html>の下(ソースの一番下)に以下を書いてみましょう。

通常の書き方

//* 実行結果
// 〜画面表示〜
// hoge!

ページの一番下に「hoge!」が表示されたと思います。

次にこれを、以下の様な書き方で行うとどうなるか・・・

onloadイベント後

//* 実行結果
// 〜画面真っ白〜
// hoge!

なんという事でしょう!
ページが真っ白になって、「hoge!」の文字だけに・・・

document.writeは、HTMLソース上に、タグや文字列を追加する時に利用するものなのですが、通常で書くと、上のような書き方で、さほど問題は置きないんですが、
Ajax対応などで、「ページの読み込み後に文字を挿入・・・」みたいな事で下のような書き方をすると、画面がぶっ飛んでしまいます。

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...