Question

Ich habe 2 Einbettungen, die ich zeige. Die betten hat einen Link zu einem 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> 

Ich habe auch 2 Tasten, eine die Einbettungs zu zeigen, und eine anderen die Einbettungs zu verstecken. Wie folgt aus:

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

ich die folgenden Funktionen verwenden, um die bettet ein- und ausblenden:

<script> 
    function show(target) { 
     document.getElementById(target).style.display = 'block'; 
    } 
    function hide(target) { 
     document.getElementById(target).style.display = 'none'; 
    } 
</script> 

Meine ich nur Ein- und Ausblenden eines der bettet, ist mein Problem so: Evertime zeige ich die betten Sie es ein, lädt das pdf neu und geht zum Anfang der pdf Seite. Ich möchte das PDF nicht jedes Mal neu laden, wenn ich es zeige. Wie kann ich das erreichen?

Answer 1

Das PDF wird nicht in meinem Browser (Chrome) neu geladen, daher kann ich nicht reproduzieren, aber die Verwendung von .visibility anstelle von .display funktioniert möglicherweise in Ihrem Browser.

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

Answer 2

Sie könnten auch .show()/verwenden. Verstecken() JQuery-Funktion. Arbeiten plump here. FYI, fügte auch Demo des Ladens einer ausgewählten PDF in einzelne <emded> hinzu.

/* 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'); 
});