Combatting iFrame issues with Opera and Mobile Devices

Posted on 08/20/2014 at 08:11 am by Kevin Wentworth
Viewed 10,243 times | 0 comments

After discovering that Opera automatically downloads a PDF file while using an iFrame to load it into a page, I spent some time looking around on how to avoid this issue. It ended up coming down to a pure JavaScript work-around.

What Had To Be Done

To fix this issue, I ended up having to remove the content from a static HTML section, and prepare to embed it with JavaScript.

  1. if() {
  2.     $("div#embedded").append('<iframe src="/path/to/pdf-file.pdf"></iframe>');
  3. }

Now, for the logic. All that was required was a check for mobile devices and Opera browsers. Opera was a little tricky.

Mobile Devices

  1. if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  2.     $("div#embedded").append('<iframe src="/path/to/pdf-file.pdf"></iframe>');
  3. }

Well, now we have mobile devices taken care of. But, now what about Opera?

Opera Browsers

With Opera, each build may have a different userAgent key, I am unsure. I am sure that certain ones DO have different keys, as the older versions you can find with

  1. if(navigator.userAgent.indexOf("Opera") == -1) {
  3. }

However, with MY current build of Opera, the key is

  1. "OPR"

So, in this case, the final code for checking the browser will be:

  1. if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && navigator.userAgent.indexOf("OPR") == -1) {
  2.     $("div#embedded").append('<iframe src="/path/to/pdf-file.pdf"></iframe>');
  3. }

Happy Programming

Bookmark and Share

Tags for Combatting iFrame issues with Opera and Mobile Devices

Javascript | Hack | Web Programming | Jquery

Comments for this Posting

No comments. Be the first to post a reply.

Sorry, comments are closed for this posting.

Please Email Kevin if you have any questions. Thanks!

Meet Site Avenger - Hosted Content Management System

Powered By: Site Avenger | Site Production: Saco Design