跨 HTML 窗口的 Javascript 函数调用答案

【问题标题】：Javascript function call across HTML windows跨 HTML 窗口的 Javascript 函数调用
【发布时间】：2011-10-12 05:38:06
【问题描述】：

根据this页面我应该可以调用子窗口的参数和函数，但它不适合我。

var w = window.open("index.html");
console.log(w);
console.log(w.foo);

console.log(w) 表明有一个名为foo 的函数，但console.log(w.foo) 输出undefined。这是一个安全问题吗？

编辑这里还有一些功能：

child.html（省略正文）：

<head>
 <script type="text/javascript"> 
  test = 123 ;
  function foo(arg){
   //do something
  }
 </script>
</head>

父.html：

var w = window.open("child.html");
console.log(w);
//outputs all the methods and parameters
console.log(w.foo);
//outputs 'undefined'
console.log(w.test);
//outputs 'undefined'

编辑 2 另外我应该解释为什么我需要传递参数，因为有人会不可避免地问我为什么不能“硬编码”。我有一个 HTML 画布元素，每次用户右键单击时，都会出现一个右键菜单，其中包含“下面的列表形状”选项。

当用户单击此菜单项时，我想传递单击下方所有形状的列表并将其显示在新窗口中。以下是我面临的问题：

我无法将它作为参数传递 b/c 我不知道窗口是否已加载（我似乎也无法更改 onload 函数）
李>
我不能让子窗口查询父窗口b/c右键菜单点击后消失。

【问题讨论】：

你的意思是一个 jsfiddle 示例还是一个独立的脚本？
我不知道如何在 jsfiddle 上实现一个示例
我相信他们有一个使用常见问题解答。无论哪种方式，我们都无法知道您的代码是什么样子。
我更新了一些信息
如果父窗口和子窗口都包含来自同一域的页面，则不应该存在安全问题。在您尝试访问其功能时，子页面 (index.html) 是否已完成加载？我通常发现最简单的方法是从父母那里获得它需要的子页面请求值，例如x = window.opener.parentFunction();，或者告诉父母它已经准备好（在孩子的 onload 结束时:) window.opener.childLoaded(); 并让父母等待在尝试操纵孩子之前调用该函数。

标签： javascript function scope window

【解决方案1】：

如果你从逻辑上看你的代码，答案是相当简单的

以下两个调用仅在您打开的窗口内有效。

console.log(w.foo);
//outputs 'undefined'
console.log(w.test);
//outputs 'undefined'

即

console.log(foo);

在父窗口javascript中，和

console.log(window.parent.foo);

在子窗口javascript中。

【讨论】：

我不熟悉window.parent。你的意思是window.opener？
我真的很抱歉 eaglstorem 但我没有遵循你的逻辑。 foo在子窗口中定义，为什么父调用console.log(foo)，子调用console.log(window.opener.foo)
@eaglestorm：他想从父窗口访问子窗口的属性。而且我认为您在声明 foo 的位置上倒退了。
我错了，我确实把它弄反了

【解决方案2】：

问题是在尝试检查其内容之前，您没有给子窗口的 DOM 一个加载机会。

console.log(w) 似乎可以通过立即显示Window 或类似内容来工作，但实际上只是当您的人类手指开始在控制台中扩展项目详细信息时，属性和方法 /em> 存在。

当我在 Firebug 断点的帮助下注入延迟时，我可以很好地看到子窗口的属性。

This question 谈到为孩子添加 onLoad 事件监听器。使用它接受的答案，怎么样：

<script type="text/javascript">
// parent.html
var w;

function lol() {
    console.log(w.foo);
    console.log(w.test);
}

w = window.open("child.html");
console.log(w);
w.addEventListener('load', lol, true);
</script>

（我也能够以 1s setTimeout 延迟取得成功。）

【讨论】：

我会试一试，虽然我怀疑它会起作用，因为 10 秒的超时延迟对我不起作用......哇，它真的起作用了
@puk：无论你为实现 10 秒超时所做的一切都是错误的。再说一次，你没有给我们看，所以我们不能告诉你那是什么。
嗯，它有点工作。它适用于foo 和test，因为它们是硬编码的。但是，例如，如果我执行function lol(){ w.xyz = 123; console.log(w.xyz)}，则输出仍然是undefined。
@puk：我不确定您是否可以将新属性注入子窗口。
有什么方法可以“要求”孩子给自己注入新的属性吗？ IE。 w.addEventListener('load', lol, true, args)?我必须出去，过几个小时再检查。