我有两个嵌入式内容需要展示。这些嵌入式内容有一个指向PDF文件的链接:
<div id="container" class="text-center">
<embed src="www.example.com/pdf1.pdf" width="550" height="800" type='application/pdf' id="mypdf1">
<embed src="www.example.com/pdf2.pdf" width="550" height="800" type='application/pdf' id="mypdf2">
</div>
我还有两个按钮,一个用于显示嵌入内容,另一个用于隐藏嵌入内容。就像这样:
<div class="button">
<button class="btn-info" onclick="hide('thePdf2')" type="button">HIDE</button>
</div>
<div class="button">
<button class="btn-info" onclick="show('thePdf2')" type="button">SHOW</button>
</div>
我使用以下函数来显示和隐藏嵌入内容:
<script>
function show(target) {
document.getElementById(target).style.display = 'block';
}
function hide(target) {
document.getElementById(target).style.display = 'none';
}
</script>
我只展示和隐藏嵌入式组件中的一个,我的问题是:每次我显示嵌入式组件时,它会重新加载PDF并回到PDF页面的顶部。我不想每次显示时都重新加载PDF。我该如何实现这一点?