javascript - 显示/隐藏而不重新加载

Question

我正在展示 2 个嵌入。嵌入有指向 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>

我还有 2 个按钮，一个用于显示嵌入，另一个用于隐藏嵌入。像这样:

<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。我怎样才能做到这一点？

Answer 1

没有在我的浏览器 (Chrome) 中重新加载 PDF，因此我无法重现，但使用 .visibility 而不是 .display 可能在您的浏览器中有效。

<script> 
    function show(target) {
        document.getElementById(target).style.visibility = 'visible';
    }
    function hide(target) {
        document.getElementById(target).style.visibility = 'hidden';
    }
</script>