JavaScript で IE アクセス時のみブルースクリーンで警告を表示する tm.destroyie6.js を作ってみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

JavaScript で IE アクセス時のみブルースクリーンで警告を表示する tm.destroyie6.js を作ってみました.

IE6 を一緒に撲滅しませんか? このスクリプトを使えば簡単に IE6 でアクセスした時のみ下の画像のような警告を出し, 他のブラウザのインストールを促します.

ちなみに, デザインは開発者用に配布された Windows 8 のブルースクリーンを真似てます.

Microsoft が作ったブラウザでアクセスした際に, Microsoft がデザインしたブルースクリーンで警告を出す. ん~皮肉感たっぷりなスクリプトですw

DATA and DEMO

いくつかデモを用意しました. IE 警告の他にも, 本家ブルースクリーンのコピーや誕生日メッセージも作ってみました.

Demo

Download

USAGE

使い方について

FLOW

流れ

  • tm.destroyie6.css をスタイルシートとして読み込む
  • tm.destroyie6.js をスクリプトとして読み込む
  • window.onload で tm.destroyie6() を実行
  • 上記のコードを<!--&#91;if IE 6&#93;>~<!&#91;endif&#93;-->で囲って IE6 時のみ処理されるようにする

SAMPLE

下記は最小サンプルです.

<!DOCTYPE html>
<html>
    <head>
        <meta charset=UTF-8>
        <title>Destroy IE6</title>
        
        <!--&#91;if IE 6&#93;>
        <link rel="stylesheet" href="../tm.destroyie6.css" type="text/css">
        <script src="../tm.destroyie6.js"></script>
        <script>
            window.onload = function() { tm.destroyie6(); };
        </script>
        <!&#91;endif&#93;-->
    </head>
    <body>
        <h1>Destroy IE6</h1>
        <p>
            This Browser is a good.
        </p>
    </body>
</html>

ARGUMENTS

tm.destroyie6 が対応している引数リスト

String Param

name brief
bluescreen ブルースクリーンをコピー.
happybirthday 誕生日メッセージ
helloworld Hello, world サンプル. 挨拶がてらに使ってください.

Object Param

name brief default
emoticon 大きく表示される顔文字 🙁
message 顔文字の下に表示されるメッセージ "This browser has a problem, and need to install another browser..."
backgroundColor 背景色 #1173AA

EXAMPLE

// ブルースクリーン
tm.destroyie6("bluescreen");
// 日本版. 背景は黒で.
tm.destroyie6({
    "emoticon": "(^_^)/",
    "message": "こんにちは, 世界.",
    "backgroundColor": "black"
});

TIPS

条件付きコメント

IE のバージョンごとに処理するコードを切り替える方法です.

IE 時のみ実行

<!--&#91;if IE&#93;>
IE だよ~ん
<!&#91;endif&#93;-->

IE 9時のみ実行

<!--&#91;if IE 9&#93;>
IE 9 だよ~ん
<!&#91;endif&#93;-->

IE 8 未満時のみ実行

<!--&#91;if lt IE 8&#93;>
IE 6 だよ~ん
<!&#91;endif&#93;-->

IE 8 以上

<!--&#91;if gte IE 8&#93;>
IE 8 だよ~ん
<!&#91;endif&#93;-->

IE 以外

<!&#91;if ! IE&#93;>
IE 以外だもんね♪♪
<!&#91;endif&#93;-->

IE の対応で苦しめられている Web クリエイターの方が多いので, こういったスクリプトが広まり少しでも負担が減ればこの上ない幸せです.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT