获取 JQuery 对话框的子 window 位置

Question

我在我的页面上使用 JQuery UI 对话框并在其中显示另一个页面 (page2.htm) 的内容。我的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test</title>

    <script src="Scripts/jquery-1.6.4.js"></script>
    <script src="Scripts/jquery-ui-1.11.4.js"></script>
    <script>
        $(document).ready(function () {
            $(".hlk1").click(function () {
                var linkId = $(this).attr("linkID");

                // initialize dialog
                var dlg = $("#dialog").dialog({
                    autoOpen: false,
                    modal: true,
                    draggable: false,
                    resizable: false,
                    position: { my: "center", at: "center", of: window },
                    height: 380,
                    width: 530,
                    dialogClass: 'ui-dialog-osx',
                    buttons: {
                        "Done": function () {
                        $(this).dialog("close");
                    }
                }
            });

            // load content and open dialog
            dlg.load('page2.html?id=' + linkId).dialog('open');
        });
});
</script>

</head>

<body>

<a href="#" class="hlk1" linkid="305">Click here</a>
<br/>
<a href="#" class="hlk1" linkid="890">Click here</a>
<br/>
<div id="dialog"></div>
</body>
</html>

在我的 page2.html 上，我想从 URL 中获取 QueryString 以在该页面上使用，但是当我尝试获取位置时，我得到 URL父页面使用

this.location

我的问题是如何在 div 中显示 page2.html 的 URL？

这是我的 page2.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>Page 2</title>
    <script src="Scripts/jquery-1.6.4.js"></script>
    <script>

        $(document).ready(function () {
            alert(this.location);

        });

    </script>
</head>

<body onload="this.focus()">
    <div>       
        <h1>Page 2</h1>
        <div style="margin-top: 10px;">

            <input type="text" id="PostId"/>
        </div>
    </div>
</body>
</html>

Answer 1

在 documentation 中查看 jQuery 的 .load() 函数。您会看到 .load() 使用 ajax 请求从您的 page2.html 中获取 HTML，然后将其放入您的 #dialog 元素中。

ajax 调用不会影响浏览器中可用的 location，它基本上只是将内容添加到当前页面。您将无法访问通过调用 .load().

在 URL 中传递的任何查询参数

如果您试图将 linkId 放在对话框中的某个位置，一旦对 .load() 的调用完成，对话框的内容将立即可用，并且您可以访问它通过 jQuery 个选择器。

例如，如果您想用 linkId 填充 <input type="text" id="PostId"> 元素，您可以在对 .load() 的调用完成后执行 $('#PostId').val(linkId);。

您可以将回调函数传递给 .load()，当 ajax 请求完成并且您的内容已加载到页面时，该回调函数将被调用，因此您可以使用linkId 在那里，像这样：

dlg.load('page2.html', function() {
    $('#PostId').val(linkId);
}).dialog('open');

获取 JQuery 对话框的子 window 位置

Get child window location for the JQuery dialog

jquery

jquery-ui-dialog