xuijs / xui

A tiny javascript framework for mobile web apps.
http://xuijs.com
789 stars 106 forks source link

Dynamic Iframes on IE on Windows Phone 7.5: x$.ready seems to fire too early #64

Closed Alfgar closed 10 years ago

Alfgar commented 12 years ago

Only on Windows Mobile 7.5 (Mango), when changing the location of an IFRAME through Javascript. The x$.ready inside the framed page seem to fire too early, such that getElementById returns null all the time. Well, basically, the DOM isn't ready and we're trying to touch it.

The (dirty) workaround is in the reproducer: stick to the body tag's "onload"

Running the reproducer: Save all the files. Add the IE-specific XUI javascript base. Host the pages so they can be access through a mobile web-browser Open iewrap.html on a Windows 7.5 phone. Try the two buttons at the bottom.

Source code for reproducer:

iewrap.html:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Nothing</title>
</head>
<body>
<iframe src="somejs.html"></iframe>
<iframe src="somejswithxui.html"></iframe>
<iframe id="frm" name="frm" src="nojs.html"></iframe>
<p>Replace "Nothing" Frame Location with:</p>
<button onclick="window.frames['frm'].location.replace('somejs.html');">Basic JS page</button>
<button onclick="window.frames['frm'].location.replace('somejswithxui.html');">XUI page</button>
</body></html>

nojs.html:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Nothing</title>
</head>
<body>
<p>Nothing</p>
</body></html>

somejs.html:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Nothing</title>
</head>
<body onload="document.getElementById('val').value='I was written by JS';">
<p>With regular markup JS</p>
<p>body's onload will set the value below</p>
<input type="text" id="val" name="val" value="Attempt failed" />
</body></html>

somejswithxui.html:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Nothing</title>
    <script src="xui-ie-2.3.2.js"></script>
    <script>
    x$.ready(function(){
        document.getElementById('val').value='I was written by JS';
    });
    </script>
</head>
<body>
<p>With XUI</p>
<p>x$.ready will attempt to set the value below</p>
<input type="text" id="val" name="val" value="Attempt failed" />
</body></html>