防止在IE和Android的初始頁面加載時顯示iFrame

Question

我有一個頁面，當點擊一個鏈接時，iFrame出現在Modal中，顯示.pdf文件。我找到了一篇有趣的文章，解釋瞭如何在沒有任何JavaScript的情況下做到這一點該代碼是： 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：

.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; 
} 

從我的文章理解，當點擊該鏈接的目標僞類，並觸發的iFrame的模式會彈出很好的過渡從不透明度變化。它在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); 
    } 

我以src =「」開頭，所以移動瀏覽器和IE不會加載iframe。然後我使用媒體查詢來查看它是否是移動設備，然後使用JS來操縱DOM，以便不將pdf加載爲iframe，而只是在單獨的選項卡中加載。