比较网页中iFrames中的两个PDF

项目如下:

有多个PDF文档
希望允许用户从文件列表中选择显示任意2个并排进行比较
需要滚动，并且能够从某种列表中更改窗口中的文档。

我已经用iFrame完成了它，除了能够选择部分(见下面的代码)。所以在这个网站上搜索了几个小时后，我找不到一个关于如何选择一个文件然后将其发送到iFrame的答案。

没有在iFrames上设置，这就是我目前所想到的。我愿意听取建议!(另外，请注意我使用Bulma CSS框架)

谢谢!

`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>

我不是100%清楚我知道你在寻找什么，但尝试下面的代码，看看是否做你想要的。我没有使用你的pdf，所以用你的pdf链接代替。html页面。我所做的就是把你们有的代码命名为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>

相关内容

最新更新

热门标签：