Twitterのバッジ(Go2web20.net製)をサイトに貼っているサイト管理者の方々へ。
公開：2009年12月 4日 02:33, 更新：2009年12月25日 07:42
Twitterのバッジが原因で閲覧者のブラウザ(IE7)が落ちているかもしれない。という早とちり。ごめんなさい！
上記URLで配布しているTwitterバッジ原因で、IE(Internet Explorer)のVer.7でのサイト閲覧時に、ブラウザごと強制終了で落ちる現象が起こっていました。
最初この現象について記事を書いて一時的に公開した時「配布スクリプトに不具合がありそうだ」みたいなことを言っていましたが・・・製作者さま、そして記事を見てパーツを外してしまったサイト管理者の方々、誠に申し訳ありません！僕の記述ミスによって引き起こされたエラーでした。
エラーを起こしてしまった原因を考えてみて、これはアナウンスしておいた方がいいという結論に。
今回のミスですが、海外サイトの配布パーツということもあり、うっかりすると僕でなくとも起こしてしまいそうなエラーだと思いましたので、詳しく解説させて頂きます。まず掲載サイト(Twitter "Follow" Badge for your site / blog)をご覧頂きたいのですが、
(スクリーンショット。クリックで拡大画像を表示します。)
それぞれの設定値を入力して、コードを取得してコピペ！だけで設置できそうなのですが、完成コードのさらに下、最後までよく見るとこんな注意書きがります。
3行目に注目。
- 原文
- Paste it on your site template right before the "BODY" end tag(<body>)
- 翻訳
- あなたのサイトのテンプレートの"BODY"終了タグ(<body>)の直前に貼り付けて下さい。
この一文を非常に軽く読んでしまったのがまずかったです。英語で最後の方に書かれているので、人によってはスルーしてしまうのではないでしょうか。
僕の場合は軽く読み過ぎて、<body>終了タグの直前にはアクセス解析のコード30行を挟んでしまい、さらにその前にTwitterバッジのコードを貼っていました。そのためコードの干渉が起き(*1)JavaScriptの実行にエラーが起き、IE7を叩き落とす凶悪サイトになってしまったというわけです。
ちなみにエラーが起きると具体的にどうなるかと言うと、下記が発生してブラウザごと落ちます。
- 強制終了時の現象
- 「開けません、インターネット サイト http://<Web site>.com. 操作は中断されました。(KB927917)」
(Microsoft サポート オンライン、機械翻訳)
"Why do I receive an "Operation aborted" error message when I visit a Web page in Internet Explorer?"
(同、英語原文)
(*1)については頂いたコメントを元に訂正しました。起こったのはコードの干渉ではなく、Twitterバッジのスクリプトの位置が原因で起きるエラーです。スクリプトにはbodyコンテナの内容に変更を加える記述があり、スクリプトが子コンテナの位置から親コンテナの内容を変更しようとする事でエラーが発生します。
当WEB人の場合、エラー発生時は下記のような誤った記述になっていました。(ここでは<body></body>が親コンテナとなり、<div></div>が子コンテナとなります。)
<body> [親コンテナの内容] <div> [子コンテナの内容] [Twitterバッジのスクリプト] </div> </body>
スクリプトが子コンテナに入っています。子コンテナのスクリプトが親コンテナの内容を変更する形。下記のような構造での記述が正解です。
<body> [親コンテナの内容] <div> [子コンテナ内容] </div> [Twitterバッジのスクリプト] </body>
スクリプトが親コンテナに入っています。これなエラーは起きません。
また、落ちない場合でもこの様な状態でした。
- JavaScriptエラー通知
- IE７のウィンドウ左下に表示される「！」マークを押すと、JavaScriptエラーが発生している旨が通知される。
(スクリーンショット。クリックで拡大画像を表示します。)
正しく貼れば何も問題ありません。
このサイトの右端にも復活しているように、ちゃんと終了<body>タグの直前に貼れていれば、大人しくて控えめでお洒落なとても良い子です(笑)
今回のTwitterバッジですが他のサイトでも使っているところをよく見かけるので、もし同じように使っているサイト管理者様がいらっしゃれば今一度、記述位置のチェックをおすすめします。お騒がせしてしまい誠に申し訳ありませんでした！
教訓、ブログパーツやウィジェットの取り扱いは慎重に行いましょう。
- 追伸1
- 最初にはてなブックマークのコメントでIE7のエラー落ちを指摘してくれたid:itboy(A Day In The Boy's Life)さん、新たに記事へのコメントも頂きありがとうございました！
- 追伸2
- コメントでご指摘＆解説を頂いた名無しさん、ありがとうございました！
カテゴリー
ついで読み！同カテゴリー記事[新着順10件]
2009年12月 1日 07:17
2009年11月30日 16:55
2009年11月30日 15:52
2009年11月30日 13:08
2009年11月11日 11:04
トラックバック(1)
URL：
Twitterのバッジ(Go2web20.net製)をサイトに貼っているサイト管理者の方々へ。
よくブログの横に「Follow Me」っていうTwitterのバッチがついてるの見たことがありますか？これはGo2web20.netっていう簡単にTwit...
2011年3月16日 22:37
コメント(2)
コメント入力フォーム
コメント内容以外は、未入力でも投稿できます。
DesignersCampさん [サイト] [メール] ※返信有り
最近導入してみました。
特にエラーが出てるっていう実感はなかったのですが、一応留意点として理解して勉強用サイトにメモさせて下さい。
2011年3月16日 22:39 | IP：126.27.18.62 |