javascript - ShowHide without reloading - Stack Overflow

admin管理员组

文章数量:1391860

I have 2 embeds I am displaying. The embeds have a link to a pdf:

<div id="container" class="text-center">           
    <embed src="www.example/pdf1.pdf" width="550" height="800" type='application/pdf' id="mypdf1">
    <embed src="www.example/pdf2.pdf" width="550" height="800" type='application/pdf' id="mypdf2">
</div>

I also have 2 buttons, one to show the embed and another to hide the embed. Like this:

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

I use the following functions to show and hide the embeds:

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

My I am only showing and hiding one of the embeds, my problem is this: Evertime I show the embed it reloads the pdf and goes to the top of the pdf page. I don't want to reload the pdf everytime I show it. How can I achieve this ?

I have 2 embeds I am displaying. The embeds have a link to a pdf:

<div id="container" class="text-center">           
    <embed src="www.example./pdf1.pdf" width="550" height="800" type='application/pdf' id="mypdf1">
    <embed src="www.example./pdf2.pdf" width="550" height="800" type='application/pdf' id="mypdf2">
</div>

I also have 2 buttons, one to show the embed and another to hide the embed. Like this:

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

I use the following functions to show and hide the embeds:

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

My I am only showing and hiding one of the embeds, my problem is this: Evertime I show the embed it reloads the pdf and goes to the top of the pdf page. I don't want to reload the pdf everytime I show it. How can I achieve this ?

• javascript
• jquery
• html
• pdf

Share Improve this question Follow edited Aug 27, 2016 at 17:16 arjwolf asked Aug 27, 2016 at 16:10 arjwolfarjwolf 19155 silver badges1616 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Isn't reloading the PDF in my browser (Chrome), so I can't reproduce, but using .visibility instead of .display might work in your browser.

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

You could also use .show()/.hide() Jquery function. Working plunck here. FYI, also added demo of loading a selected PDF into single <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');
});

本文标签： javascriptShowHide without reloadingStack Overflow