Chrome: PDF in iframe not downloadable - javascript

Hi dead StackOverflow community!
I'm currently facing problems with Google Chrome 61.
I'm creating a PDF file dynamically and embed it into an iframe on a new tab. (Actually it's our customer's whish. So there is no alternative in displaying). The created PDF document is delivered by a base64 string.
While we can view the PDF without any problems it's impossible to download it via the standard viewer of Google Chrome by pressing the "Download"-Button.
On Firefox everything works as expected. On Chrome you can press the button but it has no effect.
Basically this is my html page:
<html>
<head>
</head>
<body>
<iframe src="data:application/pdf;base64,MY_BASE_64_STRING" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen="">
</iframe>
</body>
</html>
If i'm viewing the contents inside the iframe I am able to see a lot of plugins and internal Google-Code which I think is for viewing the PDF document. A lot more than Firefox offers.
Am I missing something? I haven't got such problems in Pre-60 versions of Chrome.
Thanks in advance!
Best regards,
Mischaal

Related

Why iframe does not hide its scrollbar?

Google Chrome or Chromium (latest/stable version).
When i have an iframe with following
<style>
iframe{
overflow:hidden;
}
iframe::-webkit-scrollbar {
display: none;
}
</style>
<iframe
src="images/tion.pdf#scrollbar=0&scrolling=0&page=1&zoom=50&scrollbar=0&toolbar=0&navpanes=0"
width="410px"
height="570px"
id='myiframe'
style='border:none;'
scrolling="no"></iframe>
It seems like it is impossible to hide the scrollbar horizontally or vertically when the PDF file is containing more then 1 page?
I have tried all the related answers from stackoverflow but none of them is resolving it.
But when i use the same code in OSX with Google chrome or OSX or on Linux it works. It is not working when i use Windows and Google chrome/Chromium.
Is this unknown missed out BUG or iframe was designed like this for windows , when there is a PDF you cant remove the scrollbar's?
Try to set width and height like this:
<iframe name="right_side" src="" width="50%" height="50%" ></iframe>
hope it will help you!
The tag which is overflowing inside the iframe, add css {overflow:hidden} to that tag.It might work

Embedding Facebook posts via iframe not working

I'm attempting to embed a facebook post onto a website. I took Facebook's most basic example and plugged it into the html. On the page I see a big empty space, but no embed post. If I visit Chrome or Safari this looks perfectly fine. I'm using Firefox 47. What's interesting is that in Firefox when I visit the iframe tag I see the following generated html.
Generated html for embedded post:
<iframe style="border: none; overflow: hidden;" src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2F20531316728%2Fposts%2F10154009990506729%2F&width=500&show_text=true&height=290&appId" width="500" height="290" frameborder="0" scrolling="no">
</iframe>
Code inside iframe:
<html>
<head></head>
<body></body>
</html>
What's wrong and how do I fix this?
I downloaded Firefox 47.0 for Mac and tested your code. It opens here!
Attached is a screenshot. Sorry, this is no answer, but I cannot attach an image in a comment. So chose to answer.Screenshot on Firefox 47.0

Cross Domain Iframe Access For Mozilla Firefox

I would like to access a child iframe (iframe2) from a site having a URL suppose "http://example.com" . I have this HTML format,
<html>
<body>
<iframe id="iframe1" src="https://example.com">
<iframe id="iframe2" src="https://example.com/page1">
</iframe>
</iframe>
</body>
</html>
But i am facing an error in the form of exception
"Permission denied to access property XXXXXX"
When I used iframe.contentWindow.document.
I would like to access the content of iframe2. I am facing this problem in Firefox, I fixed this issue in Google Chrome using window.history.pushstate, which is a HTML5 API. But somehow the same code is not working in Firefox
I tried a lot many things but still not got any lead on it. Please help !! Thanks in Advance :)

Anchor tags in PDF are not clickable in firefox and safari

I have an iframe which loads PDF. It loads PDF successfully in all browsers. But anchor tags inside those PDFs are not clickable in Firefox and safari.
In works fine in google chrome.
Is there any way to solve this issue?
It looks working when used Embeddable Google Document Viewer (http://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html).
Working:
<iframe src="https://docs.google.com/gview?url=http://www.realtimecases.com/system/cases_offereds/media/000/000/009/original/Public_Relations_Communications_Overview.pdf?1453309175&embedded=true" width="100%" height="900"></iframe>

PDF embed not working in IE11, but it WORKS when edit the HTML in DOM Explorer (F12 - debug tool of IE)

Here is the Fiddle link "http://jsfiddle.net/Z99gr/2/" which similar to my code, I have created a Image slider using Galleriffic. In the image slider along with images I am showing PDF embedded.
The Fiddle link and my image slider works fine in Chrome and Firefox, but in IE I its not loading. I am testing in IE 11
In IE, when I open the "DOM Explorer (F12 - debug tool of IE)" and selects the <div> which contains the <embed> tag for PDF, it show below code.
<div id="pdf">
<embed width="500" height="375" src="https://www.adobe.com/products/pdfjobready/pdfs/pdftraag.pdf" type="application/pdf">
</embed>
</div>
And when I just edit anything in this HTML TAG within the "DOM Explorer (F12 - debug tool of IE)", it loads the PDF.
This is a very weird nature of this issue.
I don't understand how to fix this issue.
Please suggest!
I am getting below results inm IE11:
Where as the results should be something like this (its a screencapture from Chrome):
I was now able to embed the PDF file IE using "<iframe>" tag.
I replaced "<object>" and "<embed>" tag with <iframe> and its working fine now with all 3 browsers, Firefox, Chrome and IE.
There are 2 ways of embedding PDF in IE.
1st way: Call PDF directly in <iframe>
Below is the updated code:
<div id="pdf">
<iframe src="https://www.adobe.com/products/pdfjobready/pdfs/pdftraag.pdf" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
<p>It appears your web browser doesn't support iframes.</p>
</iframe>
</div>
2nd way: if the browser doesn't have PDF reader the u can call an HTML in page <iframe> which contains <object> tag .
Below is the code for 2nd option
<div id="pdf">
<iframe src="pdf.html" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
<p>It appears your web browser doesn't support iframes.</p>
</iframe>
</div>
Code for "pdf.html"
<body>
<object data="lorem.pdf" type="application/pdf">
<p>It appears you don't have Adobe Reader or PDF support in this web browser. Click here to download the PDF. Or click here to install Adobe Reader.</p>
<embed src="lorem.pdf" type="application/pdf" />
</object>
</body>
This worked for me!!!
Here is the WORKING Fiddle : http://jsfiddle.net/Z99gr/9/
Hope it will be helpful for others in future!
To anyone that has this issues in the future, you have to turn off compatibility mode for intranet sites.
Tools > Compatibility View Settings > Uncheck "Display Intranet sites in Compatibility View"
Developer tools overrides the compatibility view and displays the page in IE11. Compatibility makes the page display as IE5
Found a fix that worked for me...
I was using IE11, Win7 enterprise, and latest version of adobe reader XI which I had just updated.
The website I had a problem with, was using <object></object> to do the imbedded PDF (it was a CQ5 component, if that matters).
I didn't have to modify the html -- this is what i did:
1) Go to internet options in IE
2) Go to Advanced
3) Click "Reset...". I also clicked "delete personal settings" since I mainly use IE for testing web development so there's no much there...
4) Requires computer restart, so do that.
5) When you are back in, open IE11.
6) It will prompt you if you want to use it's default settings/accelerators. I said YES (i usually always said NO to this, in the past).
7) Open site, and enjoy success.
It also fixed this example site for me, so I know something good happened.
http://acroeng.adobe.com/Test_Files/browser_tests/embedded/embed2.html
I tried doing the "TabProcGrowth" fix in the registry (some other solution i found earlier), but that didn't work either. Only resetting IE to scratch worked for me.
Solution: Install adobe acrobat reader.
It appears to me that IE uses whatever reader is installed to view embedded or natively opened PDFs, whereas chrome, edge and other modern browsers comes with a PDF viewer of sorts.

Categories

Resources