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.
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");
}
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.
Related
Using JQuery mobile 1.4.5 (https://jquerymobile.com/)
Ironically, everything works on desktop browsers, but I cannot seem to get anything to work when testing on an iPad ...
My stripped down page (HTML) contains the following:
<div data-role="content">
<script src="test.js"></script>
<script>
$( document ).on( 'pagecreate', function( event ) { do_something(); });
</script>
</div>
The file "test.js", contains the following code:
function do_something() {
alert('here in do_something()');
}
When testing on an iPad, all I get is a grey circle with a "spinning comet" rotating around in the circle and the page never even renders (Yes, I tried rebooting the iPad, clearing browser history/data, etc).
On all other browsers, I get the alert.
Ultimately, I am trying to load google maps into the page along with the javascript I need to manipulate various DOM elements as well as manipulate the map -- which I CAN do and is working on all other browsers -- just can't seem to get anything to work when testing on an iPad (I do not know how to view source or console messages via iPad Safari, which makes debugging a nightmare).
ANY suggestions would be helpful.
Thanks in advance.
First of all, you missed some important information like, were "all other browsers" running on your desktop machine or are we talking about other mobile devices? This is extremely important.
As you can see spinner that would mean jQuery Mobile and jQuery are loaded.
If they were successfully running on your desktop computer then you may check these:
Make sure none of your content is running on or from localhost. This will work just fine on desktop computers, but if you try to test it on any other device it will fail.
Make sure you are not using an absolute path in your jQM application, this will also fail on any remote device. I presume something similar may be the case as jQM is not able to show the first page
You will need to use a remote debugging feature. As you are using an iPad I again presume you own a Mac. Follow this tutorial: https://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/ as it is the only fool-proof method where you will find what was wrong. Unfortunately, if you are using Windows machine then you would need to use Chrome and Android device.
There's also a chance, some of your *.js content is loading from localhost or other sources not available to your iPad. This also may be the case as you stated above alert is not triggering on iPad. Which would mean that some major JavaScript has occurred thus blocking the load of other JavaScript content.
And there's one other foolproof method you can use that always helped me in this case. Trim your code to the bare minimum, even if that means you need to remove most of your HTML content and JavaScript. Test it, if it works, start including removed content. First include remote JavaScript content, CSS and similar. Then if it still works, start including actual HTML and code. Sooner or later you will stumble on the problematic code, missing content, or content that was not loaded into your iPad.
Thanks to all who provided some insight...
Turned out it was an external javascript file that contained a try/catch block as:
try {
// code
}
catch {
// code
}
When changed to:
try {
// code
}
catch(err) {
// code
}
... after the change was made, all tests passed !!
I have an issue specifying access from SFSafariViewController since it has the exact same user agent as Safari browser.
What i'm trying to do is display a picture only inside the webview and remove it if its viewed on normal browser.
Tried to see if document.refferer can be used and I tried it on twitter since the latest update has its webview changed to SFSafariViewController. Almost worked but the referrer info is also being passed to safari if its opened directly from SFSafariViewController.
Would really appreciate any ideas... thanks!!
I did a bit of quick research on this, and it appears that this is not possible, hence the word Safari in SFSafariViewController.
However you can do this using the WebKit WKWebView: https://developer.apple.com/documentation/webkit/wkwebview/1414950-customuseragent
You can't check the user agent, but there are other detection mechanisms to differentiate sfsafariviewcontroller from safari.
For example, you can check for the existence of an obscure webfont: .Helvetica LT MM.
Here's some example code: https://gist.github.com/aeharding/08eaafbb7742f78ede9b8d2f5d096354
Having some teething issues with jQuery Mobile. Was wondering if anybody else is experiencing a smattering of errors when they're using Firefox (desktop) and have the jQuery Mobile script includes in their <head> like so:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
In both Chrome and Firefox I get a host of CSS errors, which I presume are negligible. But in Firefox I get a couple of JS errors on top of that, which also seems to break my page (responsive elements not rendering like they would when I remove the jQuery Mobile script).
The JS errors:
Empty string passed to getElementById(). # http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js:11100
Use of getPreventDefault() is deprecated. Use defaultPrevented instead. # http://code.jquery.com/jquery-1.9.1.js:3346
I know the errors seem pretty verbose, but I'm not familiar with bloaty javascript plugins and their policy on graceful degradation. Anyone else having this issue?
Update
As per Tim's answer, I've snapshotted evidence that these jQuery Mobile 'warnings' are actually effecting the page. Below is the page when I comment the jQuery Mobile script tags out:
And here is what the page looks like when the jQuery Mobile script tags are left in:
Note that the reason I wanted to use jQuery Mobile is purely for it's mobile touch/swipe events. I have no interest in adopting it's hash/ajax linking functionality.
What Firefox is giving you are warnings, not errors :)
Taking a look at the jQuery Mobile source :
// find present pages
var path = $.mobile.path,
$pages = $( ":jqmData(role='page'), :jqmData(role='dialog')" ),
hash = path.stripHash( path.stripQueryParams(path.parseLocation().hash) ),
hashPage = document.getElementById( hash );
Setting a breakpoint on that line using the Chrome Development Tools (Firefox and Firebug seemed unable to load the entire script), we can see that path.parseLocation().hash will be nothing when there is no hash in the URL, so document.getElementById( hash ) will throw the warning you saw in Firefox.
If it bothers you, you can turn off warnings in the Firefox Development Console, but if you're going to use jQuery Mobile I'm afraid the warning will be displayed for URL's with no hash. It isn't Firefox trying to tell you something IS wrong, it's just Firefox telling you something COULD be wrong, which is not true in this case.
Regarding the other warning, this discussion might be useful. It seems jQuery uses the deprecated getPreventDefault() for compatibility with Android 2.3.
Yes, jQuery Mobile does "mess with the DOM" when it's loaded. For example, jQuery Mobile will wrap your content in a "page" div:
Behind the scenes, the framework will inject the page wrapper if it's
not included in the markup because it's needed for managing pages
(Pages - jQuery Mobile Docs)
But you could see if it's the CSS or the Javascript that's breaking your site by including only one of the jQuery Mobile bits at a time.
I too am getting the same warning regarding the call to getElementById(), and I can confirm that it is just a warning and does not impact layout. I have asked specifically about getting rid this warning, but to no avail.
Finally, have you tried using jQuery Mobile's custom builder to get just the parts you are interested in (i.e. the touch features)?
My stuff often gets thrown out of format when using Firefox (many other small bugs too) If its just for testing, I suggest Google Chrome or Safari for best performance...
I know that in Javascript document.location.href = "#my_id" tells the browser to display the same page starting from element with id="my_id".
In this case, the address that appears in the address bar is in the following format: my_page_address#my_id
Is this the only method to refer to a specific place on a page ?
I'm looking for a method that will not show my_id in the address bar.
Most browsers implement the scrollIntoView method (MDC, MSDN) on elements. That works on IE6 and up (at least), Firefox and other Gecko-based browsers, Chrome and other WebKit-based browsers, Opera, etc.
scrollIntoView example using an element retrieved by ID:
document.getElementById("my_id").scrollIntoView();
Of course, this requires that Javascript be enabled (I'm assuming this is okay because of the Javascript tag on the question :-) ).
You can also scroll to specific coordinates on the page using window.scrollTo.
Have you tried document.getElementbyId("my_id").scrollIntoView()?
I have the following javascript being called to request a focus when page is loaded.
This code works 100% OK with Firefox and IE7, but Chrome and Safari do not seem to move the focus at all. How to make it work with all browsers?
document.getElementById("MyFlashFile").focus();
It took me hours searching the Internet, but finally I found a solution that works on the lastest versions of IE, Firefox, Chrome and Safari.
The following code solves the problem for good:
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script>
function setFocusOnFlash() {
var f=swfobject.getObjectById('myFlashObjectId');
if (f) { f.tabIndex = 0; f.focus(); }
}
</script>
</head>
<body onload="setFocusOnFlash()">
This example assumes the flash is embedded using the SWFObject library. If not, you should set the f variable to the Object or Embed tag which holds the flash movie.
Edited on 5 May 2012: Well, unfortunately it seems that the tabIndex workaround no longer works for all combinations of browser (Chrome/Safari) and operating system.
For instance, currently Chrome 18 on Windows fails.
See the link below, provided by Christian Junk, to get the status of the problem's resolution.
Unfortunately there is no way to ensure that you can set focus to a flash file that works in all browsers. IE and Firefox have solved this problem (for the most part), but Chrome and Safari are both based off of Webkit which does not have a solution.
If you ever notice on YouTube or other video / flash site that the first thing you see is something to entice you to click on the player, that is due to this problem.
One developer came up with a clever workaround, but it does involve adding some ActionScript to your flash file, this can be a pain in the ass if you are building a generic player.
Gary Bishop: Fixing Firefox Flash Foolishness
Another sort of solution is to set your wmode to opaque. I've heard this works in some situations, but will screw up cursors in text areas. I haven't had much luck with this either, but you can give it a shot.
You can find more information about the no focus bug on bugzilla.
It seems that there is a bug in Chrome:
"window.document.getElementById('swfID').focus() not working for flash objects"
http://code.google.com/p/chromium/issues/detail?id=27868
I've tried to find a workaround but I was not able to find one ;(
Regards,
Christian
In addition to Cláudio Silva answer , you need to set wmode="opaque"
Ensure this code is being called after the entire page has been rendered. It's probably being called above the HTML it refers to, so the element will not exist yet.
Various JavaScript frameworks have utilities to tell you when the DOM is ready.