CODEWITHSUNDEEP
htmlgoogle-chromepdfiframe
Bob R
Bob R

Reputation: 439

Rendering pdf in in chrome as iframe

I am trying to host pdf's in a hidden iframe and have issues with them rendering small in chrome. I have to refresh the page so that they load correctly.

JSfiddle Here https://jsfiddle.net/464xo40f/

JavaScript
=====================
$(document).ready(function(){
$("#evidence-frame").hide();
  $("#toggle").click(function(){
    $("#evidence-frame").toggle();
  });
});

HTML
======================
<h4>Ethics</h4>
<h5>CST 373: Ethics in Major</h5>
<p class="description">
    <span class="description-title">Description</span><br />
    Investigates through an ethical perspective how communication technology affects our lives. Discusses individual and institutional values represented through technological choices. Using case studies and current events, explores such issues as intellectual property rights, information access and privacy, and the digital divide. 
<br />
<span id="evidence">Evidence: </span><a id="toggle" href="#">Ethical Challenge Presented: Volkswagen's Cheating Emissions Testing with Software</a>
<br />
<iframe id="evidence-frame" src="http://www.borillion.com/portfolio/res/EthicalChallengePresentedVolkswagensCheatingEmissionsTestingwithSoftware.pdf" width="100%" style="height:66em"></iframe>
</p>
</p>

enter image description here

Upvotes: 3

Views: 12944

Answers (2)

n0m4d
n0m4d

Reputation: 832

@Bob R, if I understood you correctly, you want to display the pdf content with some zoom. Let's commence:

  1. Fiddle example

You didn't specify the JQuery library as a dependency. That's why your fiddle didn't work.

Because Fiddle is served as https and your url is not, the browser doesn't display the pdf content. If you check the console log, there will be a message like this: This request has been blocked; the content must be served over HTTPS.

  1. Opening document with zoom in

Change this:

    <iframe id="evidence-frame" src="http://www.borillion.com/portfolio/res/EthicalChallengePresentedVolkswagensCheatingEmissionsTestingwithSoftware.pdf" width="100%" style="height:66em"></iframe>

to this:

    <iframe id="evidence-frame" src="http://www.borillion.com/portfolio/res/EthicalChallengePresentedVolkswagensCheatingEmissionsTestingwithSoftware.pdf#page=1&zoom=150" width="100%" style="height:66em"></iframe>

If you look closely, you'll notice that I've appended to the url the "#page=1&zoom=100" fragment. That makes the pdf content to be displayed zoomed in.

Upvotes: 6

Aaron Lavers
Aaron Lavers

Reputation: 986

You could look at using a library like PDF.js to serve the pdf. This way it will be compatible with more browsers, and you won't need to worry about having to force a browser refresh to display the document

(FYI I'm on Chrome 51 and your fiddle doesn't load for me)

Upvotes: 0

Related Questions