2

This is a follow up from Append within Append, Iframe within Append in Jquery

I realize the code works against most browsers but doesn't work in Firefox mobile iOS. Can anyone enlighten me how I can detect iOS Firefox so that I can display a error to user?

I read about modernizr about feature detect but it doesn't seems to detect about Firefox not writing to iframe if refreshed. So I wish to just display an error for now.

Community
  • 1
  • 1
Someone Special
  • 12,479
  • 7
  • 45
  • 76

2 Answers2

4

To detect Firefox in iOS, i only complished that after seeing user agent of Chrome, Safari and Firefox. We can see 'FxiOS' is the only difference between them, Firefox user agent string reference . All CSS hacks dont't for iOS.

My solution:

function isFirefox() {
  return navigator.userAgent.match("FxiOS");
}
Matheus Vilas
  • 41
  • 3
1

You can read the user-agent with JS by using the window.navigator.userAgent property.

See: https://developer.mozilla.org/nl/docs/Web/API/NavigatorID.userAgent

For the Firefox specific values see: https://developer.mozilla.org/en-US/docs/Web/HTTP/Gecko_user_agent_string_reference)

It would still be recommended to do feature-checking instead of checking the user-agent string, since there might be another browser out there in which it doesn't work.

If you cannot figure out which specific feature to check for to distinguish your case, you could always check for success after trying to write to the iFrame. So simple write some random data to the iFrame, try to read it back, and if you cannot read it back you display your error message. This should work for browsers you might have never even heard of.

w3re
  • 592
  • 4
  • 12
  • Thank you. How do you do if-else on .on('load') statements? The problem I face is Firefox iOS have problem with $(#'myFrame').on('load',function(e)) but it will work if I use $('#myFrame').ready(function()). You can check out and play with my fiddle https://jsfiddle.net/cy87j70t/8/ – Someone Special Apr 24 '16 at 11:56
  • There does seem to be a bug related to Firefox's handling of the onload event. (https://bugzilla.mozilla.org/show_bug.cgi?id=444165) This should not affect the iOS version as far as I know, since every browser on iOS should use the same rendering engine. But since you're not seeing this bug on Chrome on iOS either it might be worth considering. You could also try using the DOMContentLoaded event which should not be affected in case the bug really is to blame. – w3re Apr 24 '16 at 12:06
  • For detecting if the .on('load') doesn't occur, you could use a reasonable timeout as a last resort. Something like ~100ms. If the frame isn't responsive within ~100ms there's something wrong anyway. Most users will hardly notice 100ms. If you can guarantee a faster load-time for the iFrame, this timeout should of course be shorter. – w3re Apr 24 '16 at 12:08
  • Thanks for your time. I think I found the solution by using a external function and call both on load and ready depending on whether mobile. https://jsfiddle.net/cy87j70t/10/ – Someone Special Apr 24 '16 at 12:28