Search code examples
jqueryiframeinternet-explorer-9

jQuery dialog + iframe gives this error in IE9: SCRIPT5009: 'Array' is undefined


I have been battling for a while with an error that I would only get with IE9. Depending on the version of jQuery and jQuery-UI, the error message would differ a bit. With jquery 1.8.3 and jquery-ui 1.8.24, I would get the following error message:

SCRIPT5009: 'Array' is undefined

However, with jquery 1.7.x and jquery-ui 1.7.x, I would get the following error message:

SCRIPT5009: 'Object' is undefined

Here is the code of the offending page:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js"></script>
<title></title>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#dialog").dialog();
        });
    </script>
</head>
<body>
    <div id="dialog">
        <iframe id="iframe1" src="jqtest2.htm"></iframe>
    </div>
</body>
</html>

And here is the code of the iframe in that page:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
</body>
</html>

I am not getting these error message in IE 9 using Compatibility View mode, in Google Chrome, or in Firefox.

The jquery inclusion within the iframe seems to be de culprit.


Solution

  • Here is how I solve my problem. I left my iframe src attribute empty, and I initialized it using jquery only after the call to dialog(). I guess, this way IE loads the iframe content a bit later, and in that case, the problem does not arise. Here is the modified code that works:

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js"></script>
    <title></title>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#dialog").dialog();
                $("#iframe1").attr("src", "jqtest2.htm");
            });
        </script>
    </head>
    <body>
        <div id="dialog">
            <iframe id="iframe1" src=""></iframe>
        </div>
    </body>
    </html>
    

    The iframe html file remained the same.