Question

我有一个aspx页面，我加载到通过JQuery Dialog显示的iframe中。该页面有一个取消按钮，可以调用成功关闭JQuery对话框的“CloseMe”脚本。该页面还有一个保存按钮，可以回发。保存数据后，我想关闭对话框。

我已经尝试注册一个启动脚本，该脚本在document.ready上调用“CloseMe”函数。当我这样做时，代码开始在JQuery中抛出没有意义的javascript错误。例如“Array is undefined”和“function is undefined”和“Date is undefined”。编辑：它在点击“window.parent。$ ...（关闭）语句时执行此操作。请注意该行之前的警报。它正确报告iframe的ID。

我在“取消”按钮中使用相同的“CloseMe”功能，一切正常。

编辑：忽略调试器中的所有25个左右错误后，对话框将关闭。

以下是打开对话框的javascript：

function jQueryShowiFrame(url, title, reloadOnClose) {

    $('<iframe id="modalIframeId" allowtransparency="true" frameborder="0" src="' + url + '" />').load(function () {

        var width = $("#modalIframeId").contents().width();
        var height = $("#modalIframeId").contents().height();
        var paddingWidth = parseInt($("#modalIframeId").css("padding-left"), 10) + parseInt($("#modalIframeId").css("padding-right"), 10);

        // the sequence of these steps is important
        $("#modalIframeId").dialog("option", "width", (width + paddingWidth) + 'px');

        this.style.width = width + 'px';
        this.style.height = height + 'px';

        $("#modalIframeId").dialog("option", "position", "center");
    })
    .dialog({
        title: title,
        modal: true,
        close: function (ev, ui) {
            $(this).dialog('destroy').remove();
            if (reloadOnClose) {
                location.reload();
            }
        },
        open: function (ev, ui) {
            //alert('x');
        }
    });
}

这是页面标记：

<asp:Button ID="btnSave" runat="server" CssClass="BasicButton" Text="Save" />
<button type="button" id="btnClose" onclick="closeMe()" >Cancel</button>

<script type="text/javascript">

    function closeMe() {
        alert(window.frameElement.id);
        window.parent.$('#' + window.frameElement.id).dialog('close');
    }
</script>

以下是“保存”按钮后面的代码：

Dim scr As String = "$(document).ready(function () { closeMe(); });"
ScriptManager.RegisterStartupScript(Me.Page, GetType(Page), Guid.NewGuid.ToString, scr, True)

Answer 1

function jQueryShowiFrame(url, title, reloadOnClose) {

    $('<iframe id="modalIframeId" allowtransparency="true" frameborder="0" src="' + url + '" />').load(function () {

        var width = $("#modalIframeId").contents().width();
        var height = $("#modalIframeId").contents().height();
        var paddingWidth = parseInt($("#modalIframeId").css("padding-left"), 10) + parseInt($("#modalIframeId").css("padding-right"), 10);

        // the sequence of these steps is important
        $("#modalIframeId").dialog("option", "width", (width + paddingWidth) + 'px');

        this.style.width = width + 'px';
        this.style.height = height + 'px';

        $("#modalIframeId").dialog("option", "position", "center");
    })
    .dialog({
        title: title,
        modal: true,
        /*Add a Property */
        autoOpen : false, /* Instead of Calling 'CloseMe' */
        close: function (ev, ui) {
            $(this).dialog('destroy').remove();
            if (reloadOnClose) {
                location.reload();
            }
        },
        open: function (ev, ui) {
            //alert('x');
        }
    });
}

使用autoOpen:false阻止在启动时打开对话框。使用它而不是调用CloseMe函数。

希望它有所帮助。

Javascript错误在回发后关闭JQuery对话框iframe中的asp.net表单

1 个答案: