Q&A
http://www.buildinsider.net/web/ief12devtools/01 開発者ツールで何かしらエラーが出ていませんか？
現在Webサイトのコーディングをしています。
■環境・要件
サイト自体はIE8(win7)とIE11(win10)に対応
ファイルサーバにhtmlなどのwebサイトに必要なファイルを配置してサイトを表示させる(Webサーバを使用しない)
jqueryは使用可能
開発環境はIE8
■ページ構成
各ページの構成は2ペイン構成で、上95pxがサイトタイトルとメニューが表示されるようになっています。
この部分は"topmenu"と呼んでおり、それより下のコンテンツ部分を"content"と呼んでいます。
■topmenuについて
topmenu部分は、コンテンツとは別のページに"header.html"として用意しておき、以下のjsにて呼び出しています。
header.htmlは各コンテンツページと同じ階層です。
$(function(){ $("#topmenu").load("header.html") });
■現象詳細
各ページのcontent部分については、ページを開くとすぐに表示されるのですが、jsで読み込んでいるtopmenu部分がIE11のみ少し(数秒)時間がかかります。
IE8でも表示は遅れますが、気になるほどの遅延ではありません。(1秒以内)
■改善したい点
IE11でのtopmenu部分の読み込みを早くしたい
■試したこと （結果はすべてかわらず）
jQueryの読み込み順序を変える
ドキュメントモードを指定しない
IE11でもIE8用のjQueryを読み込んでからIE11用を読み込む
■ソース
各ソースは以下の通りです。
□コンテンツページHTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www,w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="X-UA-Conpatible" content="IE=EmulateIE8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF=8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Style-Type" content="text/javascript"> <link rel="stylesheet" type="text/css" href="./assets/css/site.css"> <!-- jQuery読み込み --> <!-- [if lte IE 8] --> <script type="text/javascript" src="./assets/js/jqyert-1.12.4.js"></script> <!-- [end if] --> <!-- [if gte IE 9] --> <script type="text/javascript" src="./assets/js/jqyert-3.2.1.js"></script> <!-- [end if] --> <script type="text/javascript" src="./assets/js/header.js"></script> <title>TEST Page</title> </head> <body> <div id="topmenu">Loading Header Menu...</div> <!-- ここにコンテンツ --> </body> </html>
□header.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www,w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="X-UA-Conpatible" content="IE=EmulateIE8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF=8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Style-Type" content="text/javascript"> <link rel="stylesheet" type="text/css" href="./assets/css/site.css"> <link rel="stylesheet" type="text/css" href="./assets/css/header.css"> <link rel="stylesheet" type="text/css" href="./assets/css/menu.css"> <!-- jQuery読み込み --> <!-- [if lte IE 8] --> <script type="text/javascript" src="./assets/js/jqyert-1.12.4.js"></script> <!-- [end if] --> <!-- [if gte IE 9] --> <script type="text/javascript" src="./assets/js/jqyert-3.2.1.js"></script> <!-- [end if] --> <title>Header</title> </head> <body> <!-- ここにサイトタイトルとロゴ --> <!-- ここにメニューバー --> </body> </html>
皆さんのお知恵をお貸しください
以上よろしくお願い致します。
ご覧いただき感謝いたします。https://teratail.com/questions/90558に投稿してあるエラーが出ている他、jQuery3.2.1では「オブジェクトは ’addEventListener’ プロパティまたはメソッドをサポートしていません。」というエラーが出ています。また、コンテンツページでも「このオブジェクトではサポートされていない操作です」というエラーが出ていましたが、該当箇所が</HTML>であったため、原因がわからずあとに回しています。もしかするとこれが原因なのでしょうか。
とにかくエラーが出ないように修正するのが先決かと思います。
返信感謝いたします。header.htmlの<!-- jQuery読み込み -->から2回目の<!-- [end if] -->を消したところエラーは先に投稿している内容以外解消しました。他に本現象に関わる原因と思われる箇所はあるでしょうか。質問している身で生意気かもしれませんが、直感ですが先に投稿している内容が解消しても現象は解消しないように思うのです。読まないライブラリの中の一部がエラーであっても関係ないと思うからなのですが、いかがでしょうか。よろしければ見解を伺えませんでしょうか。
回答3件
0
ベストアンサー
条件付きコメント
HTML
1<!-- [if lte IE 8] --> 2 <script type="text/javascript" src="./assets/js/jqyert-1.12.4.js"></script> 3<!-- [end if] --> 4<!-- [if gte IE 9] --> 5 <script type="text/javascript" src="./assets/js/jqyert-3.2.1.js"></script> 6<!-- [end if] -->
条件付きコメントの書き方が正しくないように思います。
このコメントのポイントは、条件付きコメントを解釈できるブラウザ(IE9-)では条件分岐処理が働き、条件付きコメントを解釈できないブラウザ(IE10+, Firefox, Google Chrome 等のモダンブラウザ)では通常のコメントとして扱われるところにあります。
ところが、上記マークアップでは条件文でコメントが閉じられてしまっている為、モダンブラウザでは jquery-1.12.4.js, jquery-3.2.1.js の両方がダウンロードされ、jquery-1.12.4.js の実行は jquery-3.2.1.js の実行によって上書き実行されることになります。
条件付きコメントは IE10 で廃止されましたので、IE11 でも二重にダウンロード→実行されます。
解決する為にはモダンブラウザで読み込んでほしくない部分は、HTMLのコメントの文法が成立する形ででコメントアウトする必要があります。
HTML
1<!--[if lte IE 8]> 2<script type="text/javascript" src="./assets/js/jquery-1.12.4.js"></script> 3<![endif]--> 4<!--[if gte IE 9]> 5<script type="text/javascript" src="./assets/js/jquery-3.2.1.js"></script> 6<![endif]-->
(2017/09/06 15:12 追記)
ただし、この書き方では条件付きコメントを解釈できない IE10 以降およびIE以外のブラウザでは jQuery が読み込まれないという致命的な問題があります。
そこで、これらのブラウザ用に「jQueryが読み込まれなかった時用のコード」を書いて対応します。
HTML
1<!--[if lte IE 8]> 2<script type="text/javascript" src="./assets/js/jquery-1.12.4.js"></script> 3<![endif]--> 4<script type="text/javascript"> 5'use strict'; 6if (typeof jQuery !== 'function') { 7 (function () { 8 var script = document.createElement('script'); 9 script.type = 'text/javascript'; 10 script.src = './assets/js/jquery-3.2.1.js'; 11 document.body.appendChild(script); 12 }()); 13} 14</script>
なお、要件としてはこれで対応できると思いますが、jquery-1.12.4.js, jquery-3.2.1.js のどちらかをDLする仕組みにメリットがあるかについては疑問が残ります。
IE8, IE11 の両方に対応しなければならない以上、どちらにも存在する機能でコードを書かざるを得ず、jquery-3.2.1.js だけに存在する最深の機能を使うことが出来ません。
通常であれば、jquery-1.12.4.js のみをDLする実装で問題はないと思われますので、今一度設計を考え直してみると良いかもしれません。
script要素を置く場所
<head> 内にscript要素を置いているようですが、</body> 手前に置くと js ファイル読み込み時のレンダリングブロックがなくなるので、描画速度の高速化に繋がります。
副次的効果として、そうすることで、$(function(){}); を省略することが出来ます。
Re: Kussy- さん
投稿2017/09/05 08:40
編集2017/09/06 06:15
総合スコア18162
ご返答遅くなり申し訳ありません。
今回の肝は"条件分岐の書き方"という点だったんですね。
コメントを今まで普通に使っていたのでIEverによって読まれないというのは初耳で驚きでした。
提示していただいた条件分岐のコードを使用して確認したところ、確かに現象が改善され早くなりました。
ありがとうございます。
IEで表示させた際に一番上に<![end if]-->という文字列が表示されたので、この行を削除したところ、表示されずに現象が解消しましたので、備忘録を兼ねてご報告させていただきます。
この度は誠にありがとうございました。
> IEで表示させた際に一番上に<![end if]-->という文字列が表示されたので
失礼しました。IE8 ではコメントが表出してしまいますね。資料を読むだけで未検証なのが良くありませんでした。
修正したHTMLを親記事に追記しました。
0
ヘッダーを.load()で読んでいるということは、Ajaxで読んでいるということです。
特に必要がないのであれば、直接コンテンツを配置するか、iframeにしたほうが良いと思います。
X-UA-Conpatibleは単なるタイプミスでしょうか？
（mがnになってます）
html
1<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
jQuery version 3で、.load()は削除されました。
下記のHTMLの場合分けは必要なく、すべてのバージョンでjQuery version 1系を使うのが良いと思います。
個人的には古いバージョンに合わせるより、新しいバージョンを古いブラウザでも表示できるようにしたほうが現実的かと思います。
html
1<!-- jQuery読み込み --> 2 <!-- [if lte IE 8] --> 3 <script type="text/javascript" src="./assets/js/jqyert-1.12.4.js"></script> 4 <!-- [end if] --> 5 <!-- [if gte IE 9] --> 6 <script type="text/javascript" src="./assets/js/jqyert-3.2.1.js"></script> 7 <!-- [end if] --> 8 9<!-- ↓下記に変更 --> 10 11<!-- jQuery読み込み --> 12 <script type="text/javascript" src="./assets/js/jqyert-1.12.4.js"></script>
投稿2017/09/01 12:36
編集2017/09/05 12:05
総合スコア1652
ご回答いただきありがとうございます。
やはりiframeの案が出てきますよね。。最初の仕様検討時に悩んだ部分です。
タイプミスについては申し訳ありません。開発環境が外部ネットワークに繋がっていないためコピーペーストできず、この投稿含めすべてスマホから投稿しているため一部タイプミスが発生しました。
.loadが削除されたことは知りませんでした。頂きましたリンク先を確認しましたが、$("#topmenu").on("load", header.html)とすればできるということでしょうか。
後で実機で確認してみます。
ご回答いただいた最後のajaxSetupは、明示的にいれた覚えはないのですが、通常どちらにいれるべきものなのでしょうか。断片的な理解で申し訳ありませんが、ご教授いただけると幸いです。
上記を試してみて、できなければjQuery1.12.4だけ使う、それでもダメならiframeを使用することにしてみます。
JavaScriptの読み込み部分の条件分岐をやめて、下記のようにすればOKです。（コードに書いてあるとおりなんですが。。。。）
--
<!-- jQuery読み込み -->
<script type="text/javascript" src="./assets/js/jqyert-1.12.4.js"></script>
とりあえず、これで遅延は解消されるかと思います。
$.ajaxSetup()の話は遅延とはまたちょっと違う話なので、ここでは触れないでおきます。
> .loadが削除されたことは知りませんでした。頂きましたリンク先を確認しましたが、$("#topmenu").on("load", header.html)とすればできるということでしょうか。
jqueryバージョン3系では「.load()」はもう使用できません。もともと.load()は$.ajax()のエリアスなのでこちらを使用します
下記、質問でのJavaScriptコードについて確認があります。
<!-- [if gte IE 9] -->
<script type="text/javascript" src="./assets/js/jqyert-3.2.1.js"></script>
<!-- [end if] -->
IE9以上なら「jquery-3.2.1.js」を読むというコードだと思ったのですが違いますでしょうか？
※jqueryバージョン3系を使用しているとして、IE11で遅いけど使えている理由はたぶんバージョン互換のパッケージも一緒に入れているからだと思います。
ご返答ありがとうございます。
条件分岐をやめたところ、確かに遅延はなくなりました。
>IE9以上なら「jquery-3.2.1.js」を読むというコードだと思ったのですが違いますでしょうか？
ご認識いただいている通り、元々最新版の3.2.1を使用したかったのですが、v3がIE8に対応していないため、IE8はv1を読ませている状態です。
バージョン互換パッケージについて調べてみます。
To: Tomak さん
余談の指摘で恐縮ですが、IE8 は XMLHttpRequest をサポートしている為、new ActiveXObject('Microsoft.XMLHTTP') の互換コードは不要ではないでしょうか。
ちなみに、new ActiveXObject('Microsoft.XMLHTTP') は MS が推奨していない古い書き方で、MSは 'Msxml2.XMLHTTP.6.0'、それがなければ 'Msxml2.XMLHTTP.3.0' を指定する事を推奨しています。
https://blogs.msdn.microsoft.com/xmlteam/2006/10/23/using-the-right-version-of-msxml-in-internet-explorer/
> IE8 は XMLHttpRequest をサポートしている為、new ActiveXObject('Microsoft.XMLHTTP') の互換コードは不要ではないでしょうか。
確かに。。。（汗;;;）削除修正しておきます。
「Msxml2.XMLHTTP.6.0とMsxml2.XMLHTTP.3.0」の話は知りませんでした。MSが「Msxml2.XMLHTTP」よりも「Microsoft.XMLHTTP」のほうがいい名称だと認めてるのはちょっと笑えます。
0
読まないライブラリの中の一部がエラーであっても関係ないと思うからなのですが、
いかがでしょうか。よろしければ見解を伺えませんでしょうか。
呼んでいないライブラリであればエラーはでないと思うのです。
また呼んでいないのであれば、それもいったんコメントアウトしてみ速度がどうなるのか試してみてはどうでしょうか？
投稿2017/09/01 09:33
退会済みユーザー
総合スコア0
返信遅くなり申し訳ありません。
ご回答ありがとうございます。
先に投稿している内容は、IE8での出来事であり、今回質問させていただいた内容はIE11の現象です。
コードとしてはIE8環境にて先に投稿している現象が発生していますが、IE11では今回発生した現象以外はおきていません。
また、読んでいないライブラリーをコメントアウトとのご提案を頂きましたが、IE11環境で読んでいないjQuery-1.12.4をコメントアウトするとIE8に対応することができなくなり、"■topmenuについて"にて記載させていただいた通り、jsでタイトルメニュー部分を呼び出していますので、スクリプトをコメントアウトすると表示されなくなってしまいます。
あなたの回答
tips
プレビュー
