Question

我在同一目录中有两个HTML个文件：

parent.html

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function open_child_window() {
    var sayHello = function(name) {
        alert('Hello ' + name + '!');
    }
    var win = window.open('child.html');
    win.onload = function() {
        win.myCallbackFunction = sayHello;
    };
}
</script>
</head>
<body>
    <a href="#" onclick="open_child_window();">Open Child Window</a>
</body>
</html>

child.html

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function sayHelloParent() {
    myCallbackFunction('Susan');
}
</script>
</head>
<body>
    <a href="#" onclick="sayHelloParent();return false;">Say Hello on the Parent Window</a>
</body>
</html>

使用上面的两个代码，我在父窗口上单击：Open Child Window。然后，当我从子窗口单击链接：Say Hello on Parent Window时，我会在父窗口上收到正确消息的警告。

现在，我的目标是自动完成，而无需点击该链接。

我尝试了<body onload="..." ...>等不同方式，但没有成功。

关于如何使这项工作的任何想法？

谢谢！

Answer 1

当子窗口调用该函数时，父级可能尚未初始化。

这就是为什么你应该在他们的窗口中将两个函数加到 onLoad ，而不仅仅是在子窗口中。

Answer 2

在页面加载上调用回调的问题是回调还没有被添加到子窗口，你可以添加一个setTimeout来等待很短的时间直到添加函数。

这是因为parent.html的代码在页面内容加载后运行，但也在加载后运行代码之后运行。

document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        myCallbackFunction('Susan');
    }, 10)
});

我使用了addEventListener函数而不是onLoad，它们应该具有相同的功能

Answer 3

但是你说你想在没有点击的情况下这样做。父窗口在父窗口尚未完全加载时创建子窗口。当子窗口调用父窗口时，父窗口可能尚未初始化。要确保父级已初始化，请在加载后不要从HEAD创建子级，而是从body创建子级。

从子窗口调用父窗口功能不起作用

3 个答案: