リロードせずに表示/非表示

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つのボタン、1つを持っています。私は埋め込み機能を表示し、非表示にするには、以下の機能を使用

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

を、私の問題はこれです：私は示してEvertime埋め込み、pdfをリロードし、pdfページの先頭に移動します。私はそれを表示するたびにpdfをリロードしたくありません。どうすればこれを達成できますか？

Answer 1

私のブラウザ（Chrome）でPDFを再読み込みしていないため、再現できませんが、ブラウザで.displayの代わりに.visibilityを使用するとブラウザでうまくいく可能性があります。

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

Answer 2

また.SHOW（）/。非表示（） jQueryの機能を使用することができます。作業プランナーhere。さらにFYIは、選択したPDFを単一の<emded>に読み込むデモを追加しました。

/* toggle show hide of pdf */ 
$(document).on('click', '.pdf-container button', function(event){ 
    var $target = $(event.target); 
    var $pdfViewer = $target.closest('.pdf-container').find('embed'); 

    if(!$pdfViewer){ return; } 
    if($pdfViewer.is(':visible')){ 
     $pdfViewer.hide(); 
     $target.text('show'); 
     return; 
    } 

    $pdfViewer.show(); 
    $target.text('hide'); 
});