Question

我有两个文件：parent.html和child.html

parent.html使用jquery ajax $ .get / $ .post

调用child.html

现在，在child.html中，我想访问parent.html（不使用iframe）

像

这样的命令

$("#id", window.parent.document).doSomething();

不起作用。如何实现这一目标？

Answer 1

这取决于您何时尝试访问$（“＃parent_id”）。

如果您直接在“child.html”中的某个脚本标记中调用$（“＃parent_id”），它将无效，因为您尚未加载html。

如果是在您加载孩子后发生事件调用的结果，它应该有效。

例如，这应该有效：

<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
    $(function() {
        var child_html = "<button onclick=\"$('#update_me').html('hello!')\">click me!</button>";
        $("#place_for_child").append(child_html);
    });
</script>
</head>
<body>
<div id="update_me"></div>
<div id="place_for_child"></div>
</body>
</html>

变量child_html可以从单独的文件中加载。

这是jsfiddle version。

Answer 2

您可以使用window.opener，如果您使用child作为父窗口

         window.opener.$("#id").doSomething();

如果您在parent.html中加载child.html，那么您只需使用

即可

            $("#id").doSomething();

因为，在parent.html中加载了Child.html，它也是parent.html的一部分

Answer 3

如果您使用$.load / $.get将child.html的内容加载到parent.html中的现有元素，那么$('#id')就足够了

Answer 4

如果您要从parent.html发出ajax请求，您将收到child.html的html标记。这与打开子窗口非常不同，子窗口然后可以与其父窗口交互。

在这种情况下，您的javascript on child.html将不会运行，因为它永远不会加载到浏览器窗口中。如果您希望代码执行，则必须使用Eval手动执行。

听起来您需要重新思考网页的互动方式。 ajax的常用用例是异步提取数据。如果你想引入功能，请查看像require.js这样的库

jQuery - 选择调用ajax的文档

4 个答案: