問題点・質問
JavaScript(後述のIframe.js
)を使って、以下の2つの動作を実行させています。
0. ナビゲーションメニューをクリック→インラインフレームに表示するページを切り替える(Iframe.js
前半)
0. インラインフレームに表示されるページの高さに、インラインフレームの高さをそろえる(Iframe.js
後半)
コンソールで確認すると、
Chrome, Firefox, Edgeでは、index.html
をロードしたときと、ナビゲーションメニューをクリックしたときの両方で、Iframe.js
が動作しています。
しかし、Internet Explorerでのみ、index.html
をロードしたときにIframe.js
が動作しません。ナビゲーションメニューをクリックしたときにはIframe.js
は動作しています。
これはInternet Explorerの仕様なのでしょうか。それとも、Iframe.js
を修正して対処できるのでしょうか?
環境
- ブラウザ:(各最新版)
Google Chrome 68.0.3440.106
Firefox Quantum 61.0.2
Internet Explorer 11.165.17134.0
Microsoft Edge 42.17134.1.0
- OS:Windows 10 Home(バージョン 1803)
- jQuery: 2.2.4
コード
index.html
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" type="text/css" href="css/main.css"> 6 <title>ウェブサイト</title> 7</head> 8<body> 9 <!--ナビゲーションメニュー--> 10 <nav id="menu"> 11 <ul> 12 <li id="firstmenu" data="top">Top</li> 13 <li data="page1">ページ1</li> 14 <li id="lastmenu" data="page2">ページ2</li> 15 </ul> 16 </nav> 17 18 <!--インラインフレーム--> 19 <div id="main"> 20 <iframe src="top.html" id="parentframe" class="frame"></iframe> 21 </div> 22 23<script type="text/javascript" src="javascript/jquery-2.2.4.min.js"></script> 24<script type="text/javascript" src="javascript/Iframe.js"></script> 25</body> 26</html>
Iframe.js
Javascript
1// 前半 2$("li").click(function() { 3 id = $(this).attr("data"); 4 console.log(id); 5 $("#parentframe").attr("src",id+".html"); 6}); 7 8// 後半 9$("#parentframe").load(function(){ 10 var vScr = $(window).scrollTop(); 11 var contentDocument = this.contentDocument || this.contentWindow.document; 12 $(this).height(0); 13 var frameHeight = contentDocument.documentElement.scrollHeight; 14 $('.frame').css("height", frameHeight + 20); 15 console.log(frameHeight); 16 $(window).scrollTop(vScr); 17});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。