IEとAndroidの最初のページの読み込み時にiFrameが表示されないようにする

Question

リンクをクリックするとiFrameが.pdfファイルを表示するモーダルに表示されるページがあります。 JavaScriptなしでこれを行う方法を説明した興味深い記事が見つかりました。コードは次のとおりです。リンクがターゲット擬似クラスがトリガされたクリックとiframeが素敵な移行にモーダルにポップアップ表示されたとき、私は記事から分かるものから、

.modal { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0, 0, 0, 0.8); 
    z-index: 99999; 
    **opacity: 0;** 
    -webkit-transition: opacity 400ms ease-in; 
    -moz-transition: opacity 400ms ease-in; 
    transition: opacity 400ms ease-in; 
    pointer-events: none; 
} 

.modal:target { 
    **opacity:1;** 
    pointer-events: auto; 
} 

： HTML

<span id="initials" data-tooltip="Click to see my Resume"><a href="#openModal">JJ</a></span> 

<div id="openModal" class="modal"> 
     <div> <a href="#close" title="Close" class="close">X</a> 
     <h2>My Resume</h2> 
     <iframe src="doc/resume.pdf"> </iframe> 
     </div> 
    </div> 

CSS不透明度の変更から。それはFF/Chromeの魅力のように機能します。しかし、IEやAndroidのChromeブラウザでは、iFrameが最初のページリクエストで読み込んでいます。私はここを見て、この解決策を見た。

if (navigator.appName == 'Microsoft Internet Explorer') { 
    window.frames[0].document.execCommand('Stop'); 
} else { 
    window.frames[0].stop(); 
} 

しかし、それはiFrameが完全に読み込まれるのを防ぐ。私はグーグルでこれに関連する解決策を見つけませんでした。誰かがこれをIEとAndroidで動作させる方法に関するアイデアがあれば感謝します。ここにはLinkありがとう...

Answer 1

誰かが私が思いついた解決策はここに興味があれば。

<div id="openModal" class="modal"> 
     <div> <a href="#close" title="Close" class="close">X</a> 
     <h2>My Resume</h2> 
     <iframe id="iframeDisplay" src=""> </iframe> 
     </div> 
    </div> 

<!-- ================================================================================ 
    This Javascript is required for IE and Android browsers. It seems that they do not 
    respect the opacity property on load so need a hack to make it work...  ===== 
    ================================================================================ --> 


<script> 
    if (window.matchMedia("(max-width: 800px)").matches) { 
     /* the viewport is no more then 800 pixels wide 
      so no modal ==============================*/ 
     var anchorElement = document.querySelector('.classInitials'); 
     anchorElement.setAttribute("href", "doc/resume.pdf"); 
     // Create and set a target attribute 
     anchorElement.createAttribute("target"); 
     anchorElement.setAttribute("target", "_blank"); 
    } 
    else { 
     /* the viewport is greater than 800 pixels wide 
      and make .pdf popup in a modal ============*/ 
     var iframeElement = document.querySelector('#iframeDisplay'); 
     document.getElementById("initials").addEventListener("click", function (event) { 
      // Make iFrame appear on click 
      iframeElement = document.querySelector('#iframeDisplay'); 
      iframeElement.setAttribute("src", "doc/resume.pdf"); 
      document.getElementById("iframeDisplay").style.display = "block"; 
     }, false); 
     /*getElementsByClassName actually returns an HTMLCollection, even though you have only one element with that classname in DOM, so you have to retrieve it with index 0. Alternatively, since we only have one element with the classname, you can safely use querySelector, which will return the first match element.*/ 
     var element = document.querySelector('.close'); 
     element.addEventListener("click", function (event) { 
      // Change iframe back to invisible and src to "" 
      iframeElement.setAttribute("src", ""); 
      document.getElementById("iframeDisplay").style.display = "none"; 
     }, false); 
    } 

モバイルのブラウザとIEではiframeを読み込まないため、src = ""で始まります。次にメディアクエリを使用してモバイルデバイスであるかどうかを確認し、JSを使用してDOMを操作してiframeとしてpdfを読み込まず、代わりに別のタブに読み込みます。