在JavaScript中，子窗口与父窗口之间的交互是一个常见的需求，特别是在构建复杂的Web应用程序时。本文将详细介绍如何在JavaScript中让子窗口调用父窗口的变量和函数，以及涉及的一些窗口调用技巧。
我们来看一个例子，这个例子中，子窗口是通过`window.open()`方法新开的一个窗口：
**父窗口代码：**
```html
<!DOCTYPE html>
<html>
<head>
<title>parent</title>
<script type="text/javascript">
var parentPara = 'parent';
function parentFunction() {
alert(parentPara);
}
</script>
</head>
<body>
<button onclick="parentFunction()">显示变量值</button>
<button onclick="window.open('child.html')">打开新窗口</button>
</body>
</html>
```
在这个例子中，`parentPara`是父窗口中的一个变量，`parentFunction`是定义的一个函数。子窗口可以通过`opener`对象来访问父窗口的变量和函数。
**子窗口代码：**
```html
<!DOCTYPE html>
<html>
<head>
<title>child</title>
<script type="text/javascript">
function modify() {
opener.parentPara = 'child';
}
</script>
</head>
<body>
<button onclick="opener.parentFunction()">调用父页面的方法</button>
<button onclick="modify()">更改父页面中变量的值</button>
</body>
</html>
```
子窗口中，我们可以通过`opener`属性来引用父窗口。例如，`opener.parentPara`用于访问父窗口的`parentPara`变量，`opener.parentFunction()`则用于调用父窗口的`parentFunction`函数。但是，如果父窗口被关闭，再次尝试访问`opener`对象会抛出错误：“被调用的对象已与其客户端断开连接”。
接下来，我们看一个不同的场景，这次子窗口是父窗口中的一个`iframe`：
**父窗口代码：**
```html
<!DOCTYPE html>
<html>
<head>
<title>parent</title>
<script type="text/javascript">
function fill() {
//alert(frame1.window.childPara); // 显示frame1内的变量值
var str = document.getElementById('txt1').value; // 获得文本框内输入的值
frame1.window.div1.innerHTML = str; // 将值填入子页面的一个div中
}
</script>
</head>
<body>
<div style="background-color:yellow;width:300px;height:300px;">
父页面
<iframe id="frame1" src="child.html" frameborder="0" scrolling="no" width="120px" height="120px"></iframe>
<br/><br/><br/><br/>
<input id="txt1" type="text"/>
<button onclick="fill()">将文本框内值填充入子界面</button>
</div>
</body>
</html>
```
在这个例子中，`frame1`是`iframe`的ID，我们可以使用`frame1.window`来访问`iframe`中的全局对象，从而访问其内部的变量和函数。
**子页面（iframe内容）：**
```html
<!DOCTYPE html>
<html>
<head>
<title>child</title>
</head>
<body>
<div id="div1">初始值</div>
</body>
</html>
```
在这个`iframe`子页面中，我们可以设置一些变量和函数，并通过父窗口的JavaScript代码来调用它们。例如，可以创建一个`childPara`变量和`childFunction`函数，然后在父窗口的JavaScript中通过`frame1.window.childPara`和`frame1.window.childFunction()`进行访问。
需要注意的是，出于安全和隐私考虑，浏览器可能会限制跨域的`iframe`与父窗口之间的通信。如果`iframe`和父窗口不在同一个域名下，那么这种通信可能会受到限制，除非两个页面都明确地允许跨源资源共享（CORS）。
总结一下，JavaScript子窗口调用父窗口变量和函数的方法主要有以下几点：
1. 使用`opener`对象来访问父窗口的变量和函数，如`opener.parentPara`和`opener.parentFunction()`。
2. 对于`iframe`，可以通过`frame1.window`来访问`iframe`内的变量和函数，如`frame1.window.childPara`和`frame1.window.childFunction()`。
3. 当父窗口或`iframe`关闭后，再次尝试访问`opener`或`frame1.window`可能引发错误，因此需要处理这种情况，比如在尝试访问之前检查对象是否仍然有效。
4. 跨域通信可能存在限制，尤其是在`iframe`中，需要考虑CORS策略。
理解并掌握这些技巧，可以帮助你在开发多窗口或包含`iframe`的Web应用时更加游刃有余。
