Dynamically change the pdfs shown in iframe using a button. Javascript

Question

Hi I am building a simple website using bootstrap.

I want to have buttons which would change the src parameter of my iframe which is showing the pdf file. For example when I click on the button 2, I want to show the pdf2 in the iframe.

Here's what I have in the html:

<div class="btn-group" role="group" >
  <button id="1" type="button" class="btn btn-default">Report 1</button>
  <button id="2" type="button" class="btn btn-default" >Report 2</button>
  <button id="3" type="button" class="btn btn-default">Report 3</button>
</div>

<div class="embed-responsive embed-responsive-16by9">
  <iframe id="iframe" class="embed-responsive-item" src="reports\Report1.pdf"></iframe>
</div>

And this in the separate js file which I included. Please don't be so hard if I made some really obvious mistake cause I am a newbie. I tried to use some function I found here to force reloading of the website. It doesn't work

$(document).ready(function(){

    $("#1").click(function(){

        $("#iframe").attr("src", 'reports\Report1.pdf'); 
        $("#iframe").contentWindow.location.reload(true);
    });

    $("#2").click(function(){

        $("#iframe").attr("src", 'reports\Report2.pdf'); 
        $("#iframe").contentWindow.location.reload(true);
    });

    $("#3").click(function(){

        $("#iframe").attr("src", 'reports\Report3.pdf'); 
        $("#iframe").contentWindow.location.reload(true);
    });
});

zer00ne · Accepted Answer · 2016-05-30 02:29:19Z

Here's 2 ways to accomplish your objective:

Using jQuery using only one line for 3 buttons and the data-* attribute.
Using only HTML.

Both examples in Snippet have details in the comments. Using iframes in Snippet may timeout. If so, review the PLUNKER

SNIPPET

<!DOCTYPE html>
<html>

<head>
  <title>01</title>
  <meta charset="UTF-8">
  <style>
    iframe {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    .embed-responsive {
      width: 80vw;
      min-height: 600px;
      overflow: auto;
    }
    .panel {
      margin: 20px;
    }
  </style>
</head>

<body>
  
  <fieldset class="btn-group" role="group">
    <legend>Button with `data-*` Attribute Sets `src` of iframe with jQuery</legend>
    <button id="1" type="button" class="btn btn-default" data-lnk="http://book-library.info/file/modal-iframe-javascript.pdf">Report 1</button>
    <button id="2" type="button" class="btn btn-default" data-lnk="https://mtyiu.github.io/csci4140-spring15/tutorials/6/youtube-iframe-api.pdf">Report 2</button>
    <button id="3" type="button" class="btn btn-default" data-lnk="http://www.gtupw.org/articles/attachments/1358398740.pdf">Report 3</button>
  </fieldset>

  <!--This technique involves only HTML. 
Setup an anchor:
    href={{value to be transfered to iframe's src}}
    target={{value of iframe's name attribute}}
Setup iframe:
    name={{value of iframe's name; best practice is to set id and name the same value}}
-->
  <fieldset class="btn-group panel" role="group">
    <legend>Anchor Links with `target` to iframe's `name` Attribute Sets `src` of iframe| HTML Only</legend>
    <a href="http://book-library.info/file/modal-iframe-javascript.pdf" id="1" type="a" class="btn btn-default" target="iframe">Report 1</a>  <a href="https://mtyiu.github.io/csci4140-spring15/tutorials/6/youtube-iframe-api.pdf" id="2" type="a" class="btn btn-default"
    target="iframe">Report 2</a>  <a href="http://www.gtupw.org/articles/attachments/1358398740.pdf" id="3" type="a" class="btn btn-default" target="iframe">Report 3</a>
  </fieldset>
  
  <div class="embed-responsive embed-responsive-16by9">
    <iframe id="iframe" name="iframe" class="embed-responsive-item" src="http://book-library.info/file/modal-iframe-javascript.pdf"></iframe>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
    /*
	Delegate the click event to all the buttons at once.
	*/
      $(".btn").on('click', function() {
        /*
		Directly set iframe's src with the value of the 
		clicked button's (this or e.target) data-lnk.
		*/
        $("#iframe").attr("src", $(this).attr("data-lnk"));
      });
    });
  </script>
</body>

</html>

alparslanahmed · Accepted Answer · 2016-05-29 23:06:34Z

1

Changing src attribute is enough you don't need to reload iframe.

answered May 29, 2016 at 23:06

alparslanahmed

601 silver badge9 bronze badges

2 Comments

najda Over a year ago

yep I tried without it and it didn't work. That's why I started digging

alparslanahmed Over a year ago

unusual situation, can you create jsbin for this?

Collectives™ on Stack Overflow

Dynamically change the pdfs shown in iframe using a button. Javascript

2 Answers 2

SNIPPET

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

SNIPPET

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related