Issue with Iframe inside JQuery dialog only for IE

2019-07-21 23:23发布

问题:

I am facing very critical issue with my asp.net web application in which i have developed one page and loading that page using iframe inside Jquery dialog. in that i was getting errors related 'undefined object' and many subsequent errors when i am trying to open that in IE then after i did research and found that for IE we need to assign iframe src after open dialog as per this answer and i got solution at time of opening in IE now i am getting same errors when i am trying to close that popup.final code look like below.

<link href="../../App_Themes/Default/jquery-ui.css" rel="stylesheet" type="text/css" />  
    <script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.preload.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../Scripts/js/ui/ui.core.js">

 <script language="javascript" type="text/javascript">
function openDialog() {

            var $dialog = jQuery('#dialog');
            $dialog.dialog({
                autoOpen: false,
                resizable: false,
                title: 'Register App',
                modal: true,
                height: 500,
                width: 950,
                show: 'puff',
                hide: 'puff',
                close: function (event, ui) {
                    $('#iframeManageApp').attr('src', 'about:blank');
                    $dialog.dialog('close');
                    $dialog.dialog('destroy');
                    if (isReload) {
                        if (isAdd)
                            $("#" + '<%=hdnIsApplicationAdd.ClientID %>').val("true");
                        else
                            $("#" + '<%=hdnIsApplicationAdd.ClientID %>').val("");

                        window.location.reload();
                    }

                },
                open: function (event, ui) {
                    $('#iframeManageApp').attr('src', 'RegisterApplication.aspx');
                }
            });

            $dialog.dialog('open');
        }
    </script>

And dialog div as per below

<div id="dialog" style="display: none; padding-left: 10px; overflow: hidden;">
        <iframe id="iframeManageApp" height="450px" width="910px" 
            frameborder="0" style="overflow: hidden;"></iframe>
    </div>

Please help me if anyone did found solution of this type of problem. What should be issue with IE regarding this problem? also suggest me if anyone have alternate solution for this.

Thanks in Advance.

Update:

After some research i found that this is problem due to same js reference inside Iframe page as well. I have just changed Test.aspx in place of RegisterApplication.aspx page and there was no error in IE but when i have added same js inside that then there was same behavior!

<script src="../../Scripts/jquery.min.js" type="text/javascript"></script>

回答1:

I have resolved this issue myself with some changes in dialog option but could not find the real cause why this was happening?

I have removed hide='puff' option from dialog and final code of dialog as per below

        $dialog.dialog({
            autoOpen: false,
            resizable: false,
            title: 'Test',
            modal: true,
            height: 500,
            width: 950,
            show: 'puff',
            close: function (event, ui) {
               -----
               -----

I think in close event it will try to find jquery.min.js for hide effect and it should be the cause of my problems. But if anyone want to reproduce this thing then you can do it by following ways

1) open dialog code as per my question(ignore reload section in close event)
2) create another test page and add reference of jquery.min.js in that as well
3) load test page inside iframe in opendialog function of javascript