有没有办法让带标签的 pdf 显示在 Edge 中工作？

Question

根据单击的按钮显示 3 个 pdf 的 html 在 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>

Answer 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 显示在 Edge 中工作？

Is there a way to make tabbed pdf display working in Edge?

html

javascript

pdf

iframe

microsoft-edge