Dynamically loading jQuery mobile causes IE to minimize_问答_开发者

Dynamically loading jQuery mobile causes IE to minimize

开发者 https://www.devze.com 2023-03-29 22:35 出处：网络

Okay, this is by far the weirdest bug I have ever encountered. It\'s pretty straightforward though. If I load jQuery and then jQuery mobile dynamically in any version of Internet Explorer, the actual开

Okay, this is by far the weirdest bug I have ever encountered. It's pretty straightforward though. If I load jQuery and then jQuery mobile dynamically in any version of Internet Explorer, the actual开发者_开发问答 IE window minimizes. This happens in all versions of IE through IETester, however, if I run the full version in IE9, it kicks compatibility mode and for some reason doesn't minimize.

I've tried various ways of loading the scripts (commented in the example code), all resulting in the same behaviour.

Why is this happening? Is there a way around it?

http://jsfiddle.net/Xeon06/RCsuH/

This is a known issue in jQuery mobile. The offending line is jquery.mobile.navigation.js:913.

// Kill the keyboard.
// XXX_jblas: We need to stop crawling the entire document to kill focus. Instead,
//            we should be tracking focus with a live() handler so we already have
//            the element in hand at this point.
// Wrap this in a try/catch block since IE9 throw "Unspecified error" if document.activeElement
// is undefined when we are in an IFrame.
try {
    $( document.activeElement || "" ).add( "input:focus, textarea:focus, select:focus" ).blur();
} catch(e) {}

There's the call to blur() that's sending IE windows to the back of the stack.

As a workaround, you can avoid this by placing the script tags physically in the <head> of the HTML.

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
    <script src="http://code.jquery.com/jquery-1.6.2.js"></script>
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>

...

Placing the script tags elsewhere in the document or inserting them via script triggers the bug.

This Fiddle demostrates the workaround in action. Note that this only works in a top-level document. If the document is in an <iframe>, the bug will still appear. Thus, if you open the JSFiddle editor in IE 7/8, it will still get sent to the back; but if you open just the rendered HTML, it will not.

My attempt at "fixing" it: http://jsfiddle.net/RCsuH/6/

@josh3736 was almost exactly right, somewhere in the code it is firing off a document.body.blur() which causes the minimization of the window.

My fix simply replaces that function with a no-op function. I was unable to get the script tags to fire an onload when they finished loading, so replacing the function (if necessary) is left up to you.

However all of this seems to be a bug in the jQuery Mobile library, and thus you should probably file a bug report with them. However, I'm not sure it will bother them too much that there is a bug on IE for a framework that is intended for mobile phones/tablets.

Note: This is horrible, horrible code that replaces native functions. If it is possible, don't use this.