Iframe not loading every time - javascript

I'm having a problem with displaying an iframe in my page. I am trying to use google docs to preview documents (doc, docx, pdf) from my server. Currently, I am using the following code (I've removed the URL for safety reasons):
<iframe src='//docs.google.com/viewer?url=&embedded=true' width='100%' height='600px' frameborder='0'
allowtransparency='true' style='position:relative';>Loading ...</iframe>"
The iframe loads perfectly 4 out of 5 times and when it doesn't load I get a blank iframe with empty DOM and no errors in the console. I've tested this with Chrome, Opera, FireFox, Edge and I got the same result with each one. I am really frustrated because I am losing a whole day trying to fix this problem.
I've tried to replace iframe with object like this:
<object type="text/html" data="My_Url_Here" style="width:100%; height:300px"></object>
And I got the same exact result. Has anyone run the same problem? I am using Joomla CMS. I am open to suggestions for js libraries or Joomla addons that will help me with displaying documents from the server.

Related

How to embed a PDF in an HTML page?

I need to embed a PDF file in an HTML page for the users to see it on every major device.
Most of the approaches work fine on desktop but they start to show problems on iPad devices. The PDFs are no longer scrollable if placed inside an iframe or embed tag.
I used the following techniques to overcome the problem:
1) Using pdf-image for node and converting the PDF to images and then sliding them in a div.
The problem in this approach is that the image quality gets degraded and is not suitable for viewing on Web.
2) Using PDF.js by Mozilla
It works fine on every device but it makes the page extremely slow and unresponsive on iPad
3) Using Google PDF viewer
<iframe src="https://docs.google.com/viewer?url=http://public-Url-of-pdf.pdf&embedded=true" frameborder="0" height="500px" width="100%"></iframe>
The problem with this approach is that I need to make my PDFs publicly available which I don't want to do for security reasons.
None of the above method is working for me. Is there any solution available to embed PDF in a page which works on iPad also.
One of my colleagues told me about using LibreOffice(open office) headless to embed PDFs in my page but I cannot find any documentation about it usage?
Can anyone please help? :(
Thanks in advance!
<embed src="http://example.com/the.pdf" width="500" height="375" />
Try above one for pure HTML. But another option is if you'd like to use with javascript, try Pdf.js by mozilla. https://github.com/mozilla/pdf.js
I think the simplest way to embed a PDF into a web page is to use the object tag:
<object data="assets/test.pdf" type="application/pdf" width="100%" height="800px">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="assets/test.pdf">click here to
download the PDF file.</a></p>
</object>
What the code above will do is:
- If the user browsing your site has a PDF viewer plugin (which is included by default in some browsers) it will open the PDF in the browser:
- If the user does not have a PDF viewer plugin, they will be presented with a link to download the PDF and view it on their site.
I spent a lot of time with this issue and finally reached a solution for embeeding PDFs in a HTML files, also inspired by this post. You mentioned that "converting the PDF to images and then sliding them in a div" was not satisfactory due to quality problems. Here I experienced the same since the images were blurry.
However, I tried converting the images to SVG instead of PNG and the situation was a different one: The fonts were crystal-clear when embedding the image like below:
<object type="image/svg+xml" data="https://ik.imagekit.io/nudvztcu8my/pdf2svg_example_Ft2FQgqWaG.svg">
<!-- Your fall back here -->
<img src="https://ik.imagekit.io/nudvztcu8my/pdf2svg_example_Ft2FQgqWaG.svg" />
</object>
You can directly paste that snippet into a HTML file and you will see the result. For producing this example I used a ramdom PDF from ArXiv.org and converted it to SVG using an online converter.
There are also free command line tools like pdf2svg or commerical APIs like Aspose and probably it is worth examining which approach gives the best results.
You can easily build a slider which is loading the SVG images dynamically and it is even possible to scale them to different viewports due to the vector character of the SVG images. The approach so far worked for all PDFs I tried but probably it is recommendable to implement a fallback solution still using PNGs.

Base64 sourced IFrame not displaying in mobile/responsive screens and devices

I am using an IFrame to display a PDF which is sourced from a Base64 byte string. My frame tag looks like the below (I'm using Angular).
<iframe id="pdfV" type="application/pdf" [src]="currentBase64"></iframe>
The currentBase64 variable starts with data:application/pdf;base64, and has been appropriately sanitized. On any browser it works great. However, when I am in responsive mode in Chrome, or viewing on a phone, it doesn't display the frame for some reason. The only other example I can provide is the below
http://pdfmake.org/playground.html
This playground is doing the same thing I am. Passing Base64 to IFrame to display PDF. Notice is works great until you put the screen into responsive mode -- at that point it stops refreshing.
I believe it has to do with the Base64 part of it all because when I change my frame tag to something simple such as the below it works great, even on mobile devices.
<iframe [src]="'https://www.google.com'"></iframe>
Any thoughts or solutions?

Youtube embedded video does not work on chrome

For months I've been noticing embedded youtube videos appear white on any other page, now I found out that I can watch those videos by inspecting the page and putting -nocookie at the hostname of the iframe src, i.e. https://www.youtube-nocookie.com/embed/(VIDEO_ID).
I want to know why this happen and how to fix it, my first thought was to make an userscript to change it in every page.
EDIT: It works fine on Edge and Firefox but not on Chrome, even though my settings for cookies are enabled.
SOLUTION: The problem was that my userscript on Tampermonkey extension (which was supposed to affect the youtube page) was affecting every page with an embedded video, from now on I can figure it out what part of the code was doing that but for now it's turned off.
Thanks to #JasonB for the suggestion about extensions.
This -nocookie url came out almost a decade ago when cookies were still often turned off. This codepen shows that the standard youtube embed code works just fine on a simple site.
<iframe width="400" height="300"
src="https://www.youtube.com/embed/9Ht5RZpzPqw" frameborder="0"
gesture="media" allow="encrypted-media" allowfullscreen=""></iframe>
https://codepen.io/anon/pen/baqdGz
Are there any details about your domain or a link to a broken embedded video on your site that might help us better troubleshoot your issue?
The thumbnail worked just fine, I left it open for 5 minutes and then played the video, and that is all functional. Looks like there's one js error related to the codepen setup - not what you're experiencing.

Why does ExpressionEngine seem to remove the src URL from an iframe client-side?

ExpressionEngine seems to be stripping some of the parameters from the source URL of an iframe. This is happening in the browser, not on the server.
When I view the HTML source for the page in question, the iframe source is correct. When I view it in the console, it is not the same as in the HTML source.
The elements console shows:
<iframe frameborder="0" height="166" scrolling="no" src="http://w.soundcloud.com/player/?wmode=transparent" width="100%"></iframe>
The HTML source shows:
<iframe frameborder="0" height="166" scrolling="no" src="http://w.soundcloud.com/player/?url=http%3A//api.soundcloud.com/tracks/112438993&color=ff6600&auto_play=false&show_artwork=true" width="100%"></iframe></div>
If I manually change the source in the browser's elements console, the iframe loads without problem.
I'm imagining there is some javascript that is stripping out the src, but I can't find it. I've searched and searched using Google for someone experiencing the same problem, without success.
The URL in question is: http://rebelnoise.com/articles/album-debut-in-december-for-irish-garage-popsters-dott
This happens for all soundcloud and spotify links.
Spotify Example: http://rebelnoise.com/articles/black-flags-what-the-the-bands-first-album-of-new-material-since-1985
Thanks!
EDIT:
On a hunch, I tried changing the source URL from https:// to just // --- still no luck.
I noticed that the wmode=transparent query string exists in the console, and not in the source... I wondered if a Javascript function was overwriting with the transparent query string, so tried adding that to my full URL as follows:
<iframe frameborder="0" height="166" scrolling="no" src="//w.soundcloud.com/player/?wmode=transparent&url=//api.soundcloud.com/tracks/112438993&color=ff6600&auto_play=false&show_artwork=true" width="100%"></iframe>
Interesting: I tried saving the entire page and resources to my Desktop, and running it that way-- everything seems to work, so I'm very perplexed.
I am closer to finding the problem-- it appears that wmode=transparent is being added to src all throughout the DOM, so I am wondering if some dummy added bad javascript code in the past to break this site and cause all this problem. Now to find the culprit code!
OK, I feel like a dunce- should have found the pattern sooner.
There was some code in the footer that added wmode=transparent to all the src files-- it didn't append to any queries that existed, it just replaced them with a new query string.
I removed that code, and everything is now working.

PDF calling twice in IE

I am facing an issue with PDF loading in my page.
I am using object tag to embed PDF,
<object data='addDocs.do?viewName=PDF&id="+$("#pdfId").val()+"&File=regDoc.pdf' type='application/pdf' width='95%' height='750'> </object>
This is getting called twice when using IE Browser.
I did some search on the same question and tried with response.setDateHeader("Expires", 30000);. No Luck.
I can't use IFRAME because I need to open the links inside the PDF in the same window rather than inside IFRAME.
When using EMBED tag to load PDF, If the size of the PDF is larger then browser is freezing.
So, please help me out on calling PDF only once in IE.
Thanks in advance.

Categories