Fix iframe FF bug by turning off $.mobile.pushStateEnabled during load about api.jquerymobile.com

[agcolom]

Problem no longer appearing after changing to jQuery 1.8.2 and Mobile 1.2.0

[agcolom]

Actually this bug is not resolved. Very strangely, loading the page with an example does not show the final example, however, having a # sign after the URL (either on its own or to go to an existing page marker) will enable the demo example to be displayed.

[agcolom]

No actually a # on its own is not good enough. The demo will appear when using a # that goes to a page marker or a # with something to a marker that doesn't exist (e.g. will work for
stage.api.jquerymobile.com/checkbox/#option-mini or
stage.api.jquerymobile.com/checkbox/#hello but not for
stage.api.jquerymobile.com/checkbox/# or
stage.api.jquerymobile.com/checkbox/

[gabrielschulhof]

(updated issue description)

This bug exists because jQuery Mobile calls window.history.replaceState() on startup, which causes an error in FF iframes. Thus, entries2html.xsl needs to be modified such that the examples generated contain a snippet of script before jquery.mobile.js is included:

$( document ).bind( "mobileinit", function() {
    $.mobile.pushStateEnabled = false;
});

For some reason, if someone simply writes a script tag with the angle brackets commented out, when the examples are generated, the resulting script is prefixed such that it is placed into a window.onload function:

window.onload = function() {
// The line above this comment is added during the build. Note that no closing
// brace that terminates the above function body is appended below the script,
// so an unbalanced closing brace must be added to the script snippet for it to
// not cause a syntax error.
$( document ).bind( "mobileinit", function() {
    $.mobile.pushStateEnabled = false;
});
}; // <-- This must be added into the script snippet by hand

If a mobileinit handler gets attached during window.onload that's too late. It must be attached before the jquery.mobile.js script is even loaded because it is fired as soon as the library has finished loading, whether the DOM is ready or not. The only solution I've found is to write the mobileinit handler that turns off pushState in a separate script file referenced from a script tag which is placed before the one that loads jQuery Mobile:

...
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://babulina.go-nix.ca/nix/turnOffPushState.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
...

This raises another problem: Where do we put this short script? I certainly do not wish to host it on my own server, since, when published, it would almost certainly slashdot me forever and ever amen. So, we need to

a. Publish this script somewhere reliable, or
b. find a way to include it in the examples without it getting wrapped in an onload handler.

[scottgonzalez]

The window.onload wrapper is to work around a bug in IE <10 where inline scripts are executed before external scripts when going through document.write. If the bug you're encountering doesn't affect IE <10, then we can probably wrap the wrapping code in a conditional. @dmethvin Any ideas for the best way to check for IE <10?

[scottgonzalez]

BTW, I have no idea why the closing brace doesn't come through, you can see the very simple logic that does the wrapping here: https://github.com/jquery/jquery-wp-content/blob/825a4d621b597708dd783590b5da0255ee8b4aaf/themes/jquery/js/main.js#L46

[dmethvin]

Can you use a conditional comment here? IE10 doesn't support them anymore but IE<10 does so you could wrap the whole thing in a conditional comment with [if lt IE 10] perhaps.

[miketaylr]

Does anyone know if an issue was opened in Bugzilla for this?

[jaspermdegroot]

@miketaylr

See jquery-archive/jquery-mobile#5972 (comment) and https://bugzilla.mozilla.org/show_bug.cgi?id=927842

[miketaylr]

Perfect, thanks @uGoMobi