다시로드하지 않고 표시/숨기기

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