在Web开发中，我们经常需要在两个窗口之间传递数据，例如在弹出的新窗口中提交表单并将结果传递回主窗口，或者在子窗口中显示主窗口中选择的图片等。JavaScript提供了多种方法来实现窗口之间的数据传递。
可以使用JavaScript的window.open()方法在新窗口中打开一个链接，例如：
var myWindow = window.open("newpage.html", "新窗口", "width=500, height=500");
此时，可以通过myWindow对象的document属性访问新窗口中的DOM元素，并将数据传递给新窗口：
myWindow.document.getElementById("myInput").value = "Hello World!";
因为myWindow对象是新窗口的代表，所以我们可以在主窗口中使用它来访问新窗口中的DOM元素。
在新窗口中，可以使用window.opener属性来访问打开新窗口的主窗口，例如：
var myInput = window.opener.document.getElementById("myInput");
此时，可以通过myInput对象获取主窗口中的DOM元素，并将数据传递回主窗口：
window.opener.document.getElementById("result").innerHTML = myInput.value;
因为window.opener属性引用打开新窗口的主窗口，所以我们可以在新窗口中使用它来访问主窗口中的DOM元素。
HTML代码如下：
<!-- main.html -->
<html>
<head>
<title>主窗口</title>
</head>
<body>
<button onclick="openWindow()">打开新窗口</button>
<p id="result"></p>
<script>
function openWindow() {
var myWindow = window.open("newpage.html", "新窗口", "width=500, height=500");
myWindow.data = "这是来自主窗口的数据";
}
</script>
</body>
</html>
<!-- newpage.html -->
<html>
<head>
<title>新窗口</title>
</head>
<body>
<form onsubmit="return submitForm()">
<input type="text" id="myInput" placeholder="请输入内容">
<input type="submit" value="提交">
</form>
<script>
function submitForm() {
window.opener.document.getElementById("result").innerHTML = document.getElementById("myInput").value;
return false;
}
document.getElementById("myInput").value = window.opener.data;
</script>
</body>
</html>
当点击“打开新窗口”按钮时，会打开新窗口newpage.html并向其传递数据。在新窗口中，用户输入内容并提交表单时，会将输入内容传递回主窗口并在主窗口中显示。
HTML代码如下：
<!-- main.html -->
<html>
<head>
<title>主窗口</title>
</head>
<body>
<img src="image.jpg" onclick="openWindow()">
<script>
function openWindow() {
var myWindow = window.open("newpage.html", "子窗口", "width=500, height=500");
myWindow.image = document.getElementsByTagName("img")[0].src;
}
</script>
</body>
</html>
<!-- newpage.html -->
<html>
<head>
<title>子窗口</title>
</head>
<body>
<img src="" id="myImage">
<script>
document.getElementById("myImage").src = window.opener.image;
</script>
</body>
</html>
当在主窗口中点击图片时，会打开一个子窗口newpage.html并在子窗口中显示主窗口中选择的图片。
本文链接：http://task.lmcjl.com/news/11099.html