Recent Posts
- (09/10) Fixing Warning: the ECDSA host key for 'github.com' differs from the key for the IP addressTAGS:Web Server Admin
- (12/26) CakePHP 3 - Getting List of Column Definitions from a Table (like schema())TAGS:CakephpCake3
- (09/14) Change Order of Loaded Behaviors in CakePHP 3TAGS:Cake3CakephpWeb ProgrammingPhp
- (05/29) CakePHP 3 - Accept JSON Header Only Working When Debug FalseTAGS:Web ProgrammingCakephpCake3
- (05/23) Remove All Events from Google Calendar (Reset Calendar)TAGS:Web ProgrammingPhp
- (11/08) Google Tag Manager (GTM) Not Firing Default PageView EventTAGS:Web ProgrammingJavascriptGoogle Tag Manager
- (10/13) In PHP, how do you get __toString() Magic Method Result without calling echo?TAGS:CakephpCake3Cakephp 13PhpWeb Programming
- (11/14) Getting output from shell_exec() at all timesTAGS:Web ProgrammingWeb Server Admin
Subscribe to my feed
MainelyDesign.com Blog
Combatting iFrame issues with Opera and Mobile Devices
Posted on 08/20/2014 at 08:11 am by Kevin Wentworth
Viewed 10,419 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.
- if() {
- $("div#embedded").append('<iframe src="/path/to/pdf-file.pdf"></iframe>');
- }
Now, for the logic. All that was required was a check for mobile devices and Opera browsers. Opera was a little tricky.
Mobile Devices
- if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
- $("div#embedded").append('<iframe src="/path/to/pdf-file.pdf"></iframe>');
- }
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
- if(navigator.userAgent.indexOf("Opera") == -1) {
- }
However, with MY current build of Opera, the key is
- "OPR"
So, in this case, the final code for checking the browser will be:
- if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && navigator.userAgent.indexOf("OPR") == -1) {
- $("div#embedded").append('<iframe src="/path/to/pdf-file.pdf"></iframe>');
- }
Happy Programming
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!
