PDA

View Full Version : [FIXED] IFrame and Ext.onReady in IE



m4dc4p
20 May 2011, 1:19 PM
I am loading Ext in an iframe and the onReady call has no effect. Test pages are at the bottom of this post.

The framed page, ext_test.html, uses document.body.appendChild to load Ext. It then waits for onReady to fire. The text should update to say "Ready" when Ext is available. An alert should appear when onReady fires. If you load ext_test.html separately it works fine, but if you load it in an iframe it does not.

I recognize document.onDocumentReady has already fired, but I would expect Ext.onReady to act as a pass-through - just executing my function. Also, this does work if I load Ext using a <script> tag, but that's not an option for me.

I think I traced the problem to Ext.EventManager.checkReadyState. It makes this check in IE:



if (window != top) {
return false;
}
I think this check will always fail if Ext is loaded in a Iframe. Consequently, no queued onReady functions will run.

I'm using Internet Explorer 9 on Windows 7 64 bit.

Here is the hosting page:


<html>
<body>
<iframe src="ext_test.html" width="50%" height="50%" border=1>
</iframe>
</body></html>
And the framed page (called ext_test.html):


<html>
<body>
<div id="DivExtReady"></div>
<script type="text/javascript">
function loadExtJS() {
var h = document.createElement('script');
h.type = "text/javascript";
h.src = "ext-all-debug-w-comments.js";
document.body.appendChild(h);
extWait();
}

var count = 1;
function extWait() {
var d = document.getElementById("DivExtReady");
if(! window.Ext) {
d.innerHTML = count.toString();
count = count + 1;
window.setTimeout(extWait, 1000);
}
else {
d.innerHTML = "Ready.";
Ext.onReady(function () { alert("hello"); });
}
}

window.setTimeout(loadExtJS, 1000)
</script>
</body>

m4dc4p
24 May 2011, 7:19 AM
Can anyone else reproduce this error?

egs
8 Aug 2011, 5:20 AM
Hi !
I'm experiencing the same problem..
Did you find a soluition/workaround for this ?

regards,
Petter

mankz
8 Aug 2011, 7:21 AM
What if you use this as the framed page source:



<html>
<head>
<script src="http://cdn.sencha.io/ext-4.0.2a/bootstrap.js" type="text/javascript"></script>
</head>
<body>
<div id="DivExtReady"></div>
<script type="text/javascript">
Ext.onReady(function () { alert("hello"); });
</script>
</body>

SubtleGradient
22 Aug 2011, 5:56 PM
The framed page, ext_test.html, uses document.body.appendChild to load Ext

Be careful using document.body.appendChild before onReady. It could cause an unrecoverable 'Operation Aborted' error in IE < 8.

Instead, use something like this https://gist.github.com/1164132



function loadAsyncScript(URL) {
var script = document.createElement('script'),
firstScript = document.getElementsByTagName('script')[0];
script.async = 1;
script.src = URL;
firstScript.parentNode.insertBefore(script, firstScript);
}
loadAsyncScript('ext.js');


For whatever reason, in IE<8 insertBefore is safe from the dreaded 'Operation Aborted' error.

This won't solve your Ext.onReady issue, but it'll help avoid a different issue. I'm looking into the Ext.onReady issue now.