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的网址？

这是我的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

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

ajax调用不会影响浏览器提供的location，它基本上只是将内容添加到当前页面。您无法通过拨打.load()来访问您在网址中传递的任何查询参数。

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

例如，如果您希望使用<input type="text" id="PostId">填充linkId元素，则只需完成对$('#PostId').val(linkId);的调用即可.load()。

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

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

获取JQuery对话框的子窗口位置

1 个答案: