有没有办法让选项卡式 pdf 显示在 Edge 中工作？答案

【问题标题】：Is there a way to make tabbed pdf display working in Edge?有没有办法让选项卡式 pdf 显示在 Edge 中工作？
【发布时间】：2021-05-24 20:00:02
【问题描述】：

这个 html 根据点击的按钮显示 3 个 pdf 在 Firefox 和 Chrome 中有效。第一次单击第二个或第三个按钮后，它不会在 Edge 中显示 pdf。但是当第二次单击按钮时，它会显示 pdf。什么会导致这个？如果它是 Edge 中的错误，是否有解决方法？

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
        }

        .row-container {
            flex: 1 1 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            width: 100%;
            background-color: red;
        }

        .first-row {
            background-color: beige;
        }

        .second-row {
            flex: 1 1 auto;
            flex-direction: column;
            display: flex;
            border: 3px solid lightblue;
            min-height: 0;
            overflow: hidden;
        }
        .frame {
            flex: 1 1 auto;
            border: 0;
        }

        .active {
          display: block;
        }
        .hidden {
          display: none;
        }

        .selected {
          color: white;
          background-color: blue;
        }
        .not-selected {
          color: black;
          background-color: lightblue;
        }

    </style>
</head>
<body>

    <div class="row-container">
        <div class="first-row">
            <p>just some text here</p>
            <nav>
                <div id="nav-tab">
                    <button id="but1" class="button selected">Dummy</button>
                    <button id="but2" class="button not-selected">Lorem</button>
                    <button id="but3" class="button not-selected">Resume</button>
                </div>
            </nav>
        </div>
        <div class="second-row" id="nav-tabContent">
            <iframe class="frame active" id="pdf-but1"
              src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf">
            </iframe>

            <iframe class="frame hidden" id="pdf-but2"
              src="https://file-examples-com.github.io/uploads/2017/10/file-sample_150kB.pdf">
            </iframe>

            <iframe class="frame hidden" id="pdf-but3"
                src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Resume.pdf">
            </iframe>

        </div>
    </div>
    <script>
      var buttons = document.getElementsByClassName("button");
      var frames = document.getElementsByClassName("frame");
      var i

      function click() {
        for (i = 0; i < buttons.length; i++) {
          if (buttons[i].id != this.id) {
            buttons[i].setAttribute("class", "button not-selected");
            frames[i].setAttribute("class", "frame hidden");
          }
        }
        this.setAttribute("class", "button selected");
        document.getElementById("pdf-" + this.id).setAttribute("class", "frame active");
      }

      for (i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", click)
      }

    </script>
</body>
</html>

【问题讨论】：

标签： javascript html pdf iframe microsoft-edge

【解决方案1】：

我尝试使用 Microsoft Edge (Chromium) 浏览器版本 88.0.705.74 测试该问题，发现当我们第一次单击第二个或第三个按钮时那么它需要时间并且PDF文件没有出现。

我注意到您将 display: none 设置为 Iframe 以隐藏它。

我认为 Edge 浏览器不会为那些隐藏的 iframe 呈现 PDF，当您设置 display: block 时，它会导致此问题。

您会注意到，如果我们稍微滚动一下，PDF 就会正确显示。

作为此问题的替代解决方案，我建议您可以将 iframe 相互重叠，并使用zIndex 通过单击按钮将 iframe 置于顶部。

例子：

    <!doctype html>
<html>
   <head>
      <title>demo</title>
      <style>
         body {
         display: flex;
         flex-direction: column;
         align-items: center;
         overflow: hidden;
         }
         .row-container {
         flex: 1 1 100vh;
         display: flex;
         flex-direction: column;
         overflow: hidden;
         width: 100%;
         background-color: red;
         }
         .first-row {
         background-color: beige;
         }
         .second-row {
         flex: 1 1 auto;
         flex-direction: column;
         display: flex;
         border: 3px solid lightblue;
         min-height: 0;
         overflow: hidden;
         }
         .selected {
         color: white;
         background-color: blue;
         }
         .not-selected {
         color: black;
         background-color: lightblue;
         }
         .frame {
         flex: 1 1 auto;
         border: 0;
         display:block;
         width:100%;
         height:92%;
         }
         .frm1{
         position:absolute;
         background-color: red;
         z-index: 2;
         }
         .frm2{
         position:absolute;
         background-color: green;
         z-index: 1;
         }
         .frm3{
         position:absolute;
         background-color: yellow;
         z-index: 0;
         }
      </style>
      <script>
         function fun1() {
           document.getElementById('pdf-but1').style.zIndex = 2;
           document.getElementById('pdf-but2').style.zIndex = 0;
           document.getElementById('pdf-but3').style.zIndex = 1;
           document.getElementById('btn1').setAttribute("class", "button selected");
           document.getElementById('btn2').setAttribute("class", "button not-selected");
           document.getElementById('btn3').setAttribute("class", "button not-selected");
         }
         
         function fun2() {
           document.getElementById('pdf-but1').style.zIndex = 1;
           document.getElementById('pdf-but2').style.zIndex = 2;
           document.getElementById('pdf-but3').style.zIndex = 0;
           document.getElementById('btn1').setAttribute("class", "button not-selected");
           document.getElementById('btn2').setAttribute("class", "button selected");
           document.getElementById('btn3').setAttribute("class", "button not-selected");
         }
         function fun3() {
          document.getElementById('pdf-but1').style.zIndex = 0;
           document.getElementById('pdf-but2').style.zIndex = 1;
           document.getElementById('pdf-but3').style.zIndex = 2;
           document.getElementById('btn1').setAttribute("class", "button not-selected");
           document.getElementById('btn2').setAttribute("class", "button not-selected");
           document.getElementById('btn3').setAttribute("class", "button selected");
         }
      </script>
   </head>
   <body>
      <div class="row-container">
         <div class="first-row">
            <p>just some text here</p>
            <nav>
               <div id="nav-tab">
                  <button id="btn1" onclick="fun1()" class="selected">Dummy</button>
                  <button id="btn2" onclick="fun2()" class="not-selected">Lorem</button>
                  <button id="btn3" onclick="fun3()" class="not-selected">Resume</button>
               </div>
            </nav>
         </div>
         <div class="second-row" id="nav-tabContent">
            <iframe class="frm1 frame" id="pdf-but1"
               src="https://freshmindsgroup.com/wp-content/uploads/2020/03/LoremIpsumH101-2016.pdf">
            </iframe>
            <iframe class="frm2 frame" id="pdf-but2"
               src="https://file-examples-com.github.io/uploads/2017/10/file-sample_150kB.pdf">
            </iframe>
            <iframe class="frm3 frame" id="pdf-but3"
               src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Resume.pdf">
            </iframe>
         </div>
      </div>
   </body>
</html>

Edge 浏览器中的输出：

此外，您可以尝试根据自己的要求修改代码示例。

感谢您的理解。

【讨论】：

谢谢，它可以工作，但有一个问题：在超过一页的 pdf 上，当您向下滚动时，不会显示最后一页的底部。这是'lorem'按钮下的pdf的护理。因为该 pdf 在最后一页的底部没有文本，所以您没有注意到这种差异。如果您将其中一个 src="..." 替换为 src="freshmindsgroup.com/wp-content/uploads/2020/03/…" 您会注意到在第 2 页上它的底部有一个页码，而在我的版本中它显示（在 Chrome 和火狐）。
pdf 显示高度的问题变得更加明显 bij 增加了“这里只是一些文本”的行数。如果你复制 10 次，很明显 pdf 的最后一部分没有显示，等于 iframe 中的 heightdecrease。
您需要在.frame 类中设置height:92%; 来修复页面高度问题。我已经用修改后的代码版本更新了我的答案。你可以检查一下。如果您认为此建议可以帮助您解决原始问题，那么我建议您将有用的建议标记为对该主题的回答。感谢您的理解。