比较网页中 iFrame 中的 2 个 PDF

Question

项目如下：

拥有多个 PDF 文档
想要允许用户通过从文档列表中选择来显示，其中任意 2 个并排进行比较
需要滚动并能够从某种列表中更改 window 中的文档。

我已经用 iFrame 完成了，除了能够选择部分（见下面的代码）。因此，在搜索该站点数小时后，我无法完全找到有关如何选择文件然后将其发送到 iFrame 的答案。

iFrames 上没有设置，只是我目前想到的。我愿意接受建议！（另请注意，我在 CSS 框架中使用 Bulma）

谢谢！

`enter code here`<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noindex,nofollow">
        <title>Illustrations of Masonry</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
        <script defer src="js/fontawesome-all.min.js"></script>
    </head>
    <body>
        
<section class="hero is-link">
          <div class="hero-body">
            <p class="title">
              Illustrations of Masonry
            </p>
            <p class="subtitle">
             Compare Editions
            </p>
          </div>
</section>
        
<section>        <div class="container">
            <div class="columns is-center">
              <div class="column">
                <iframe src ="pdf/1772.pdf" width="100%" height="1000">
                <p>Your browser does not support iFrames.</p>
                </iframe>
            </div>
              <div class="column">
                <iframe src ="pdf/1781.pdf" width="100%" height="1000">
                <p>Your browser does not support iFrames.</p>
                </iframe>
              </div>
            </div>
          </div>
</section>       
    
            
    </body>
</html>

UPDATE! Found a JS script that's close but I need help making it work across 2 iFrames. Sorry, huge noob here! ;-)  Feels like I'm close!


<section>        <div class="container">
            <div class="columns is-center">
              <div class="column">
                 <button id="btn1" >1772</button>
                <button id="btn2" >1775</button>
                <button id="btn3" >1781</button>
                <iframe id="frame1" src="http://www.tlhinteractive.com/preston/pdf/1772.pdf" width="100%" height="1000">
                  <p>Your browser does not support iFrames.</p>
                </iframe>
            </div>
                
              <div class="column">
                <button id="btn4" >1772</button>
                <button id="btn5" >1775</button>
                <button id="btn6" >1781</button>
                <iframe id="frame2" src="http://www.tlhinteractive.com/preston/pdf/1772.pdf" width="100%" height="1000">
                  <p>Your browser does not support iFrames.</p>
                </iframe>
              </div>
            </div>
          </div>
</section>       
        
        
        <script>
            var frame = document.getElementById("frame1");
           var frame2 = document.getElementById("frame2")
        

var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");
var btn5 = document.getElementById("btn5");
var btn6 = document.getElementById("btn6");

btn1.addEventListener("click",link1)
btn2.addEventListener("click",link2)
btn3.addEventListener("click",link3)
btn4.addEventListener("click",link1)
btn5.addEventListener("click",link2)
btn6.addEventListener("click",link3)
            
            
function link1(){
  frame.src="http://www.tlhinteractive.com/preston/pdf/1772.pdf"
}
function link2(){
  frame.src="http://www.tlhinteractive.com/preston/pdf/1775.pdf"
}
function link3(){
  frame.src="http://www.tlhinteractive.com/preston/pdf/1781.pdf"
}
            
function link1(){
  frame2.src="http://www.tlhinteractive.com/preston/pdf/1772.pdf"
}
function link2(){
  frame2.src="http://www.tlhinteractive.com/preston/pdf/1775.pdf"
}
function link3(){
  frame2.src="http://www.tlhinteractive.com/preston/pdf/1781.pdf"
}
        </script>

Answer 1

我不是 100% 清楚我知道你在找什么，但试试下面的代码，看看它是否符合你的要求。我没有使用您的 pdf，因此请将 .html 页面替换为您的 pdf links。我所做的只是获取您拥有的代码并将函数命名为 link1-link6 而不是两个 link1、两个 link2 和两个 link3的。或者您还可以在 link 1 函数中添加 frame2 的代码，用分号分隔。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noindex,nofollow">
        <title>Illustrations of Masonry</title>
        
        <script defer src="js/fontawesome-all.min.js"></script>
    </head>
    <body>
        
<section>        
       <div class="container">
            <div class="columns is-center">
              <div class="column">
                 <button id="btn1" >1772</button>
                <button id="btn2" >1775</button>
                <button id="btn3" >1781</button>
                <iframe id="frame1" src="0101001.html" width="100%" height="1000">
                  <p>Your browser does not support iFrames.</p>
                </iframe>
            </div>
                
              <div class="column">
                <button id="btn4" >1772a</button>
                <button id="btn5" >1775b</button>
                <button id="btn6" >1781c</button>
                <iframe id="frame2" src="0101002.html" width="100%" height="1000">
                  <p>Your browser does not support iFrames.</p>
                </iframe> 
              </div>
            </div>
          </div>
</section>       
    
            
    </body>
</html>

UPDATE! Found a JS script that's close but I need help making it work across 2 iFrames. Sorry, huge noob here! ;-)  Feels like I'm close!


    
        
        
        <script>
            var frame = document.getElementById("frame1");
           var frame2 = document.getElementById("frame2")
        

var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");
var btn5 = document.getElementById("btn5");
var btn6 = document.getElementById("btn6");

btn1.addEventListener("click",link1);
btn2.addEventListener("click",link2);
btn3.addEventListener("click",link3);
btn4.addEventListener("click",link4);
btn5.addEventListener("click",link5);
btn6.addEventListener("click",link6);
            
            
function link1(){
  frame.src="0101001.html";
}
function link2(){
  frame.src="0101002.html";
}
function link3(){
  frame.src="0101003.html";
}
            
function link4(){
  frame2.src="0101004.html";
}
function link5(){
  frame2.src="0101005.html";
}
function link6(){
  frame2.src="0101006.html";
}
        </script>

比较网页中 iFrame 中的 2 个 PDF

Comparing 2 PDF in iFrames in web page

javascript

html

iframe

comparison

bulma