Question

我有一个页面，当点击链接时，iFrame会出现在显示.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中使用它有任何想法，将不胜感激。这里this guide谢谢......

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而只是加载到单独的选项卡中。

防止在IE和＆amp ;;中初始页面加载时显示iFrame。 Android的

1 个答案: