JavaScript新窗口与子窗口传值详解

在Web开发中，我们经常需要在两个窗口之间传递数据，例如在弹出的新窗口中提交表单并将结果传递回主窗口，或者在子窗口中显示主窗口中选择的图片等。JavaScript提供了多种方法来实现窗口之间的数据传递。

1.使用window.open()方法创建新窗口

可以使用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元素。

2.使用window.opener属性传递数据

在新窗口中，可以使用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并在子窗口中显示主窗口中选择的图片。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript新窗口与子窗口传值详解 - Python技术站