CODEWITHSUNDEEP
javascripthtmlgoogle-chromepdfiframe
prab
prab

Reputation: 280

How to Change Pages in chrome PDF viewer?

Couldn’t find a question that matches what I am trying to do here. I have an embedded PDF on my webpage, inside of an iframe, and I have buttons on the page that will change the src of the iframe to change the page. This seems to work in IE11 and firefox as they use adobe PDF viewer, but I am running into issues on browsers like chrome and Vivaldi that use the chrome pdf viewer.

Here is my code: HTML:

<button class="pageChanger" value="http://linktomypdf.pdf#page=1">Start Of Section</button>
<button class="pageChanger" value="http://linktomypdf.pdf#page=20">Section 2</button>
<button class="pageChanger" value="http://linktomypdf.pdf#page=35">Section 3</button>
<button class="pageChanger" value="http://linktomypdf.pdf#page=45">Section 4</button>
<iframe id="iframepdf" src="http://linktomypdf.pdf#page=1" width="800" height="800"></iframe>

JS:

<script>
    jQuery(document).ready(function() {
      jQuery(".pageChanger").on('click', function() {
        jQuery("#iframepdf").attr("src", jQuery(this).val());
      });
    });
  </script>

The iframe will still load with the specified page that is in the HTML selected, but my JS function to change the page afterwards only works with the adobe PDF viewer. Is this just not the correct way to change pages programmatically in the chrome PDF viewer?

Upvotes: 3

Views: 2189

Answers (1)

prab
prab

Reputation: 280

To reload forcefully,

document.getElementById('iframepdf').contentDocument.location.reload(true);

This will also change the page and google pdf viewer.

Upvotes: 1

Related Questions