1. PingCode智库首页
  2. 百科

js子页面怎么获取父页面的值

Edit2 • • 百科

js子页面怎么获取父页面的值

JS子页面怎么获取父页面的值，使用window.opener、使用window.parent、使用localStorage。在JavaScript中，子页面获取父页面的值可以通过多种方法实现，其中包括使用window.opener、window.parent以及localStorage。每种方法都有其特定的应用场景和优缺点。以下将详细介绍这几种方法，并说明它们的使用场景和具体实现方式。

一、使用window.opener

window.opener属性返回对创建了当前窗口的窗口的引用。它主要用于子窗口获取父窗口的值。

1、使用场景

window.opener适用于通过window.open()方法打开的新窗口或子页面。这种方法通常用于需要在新窗口中进行一些操作，并且这些操作需要基于父窗口中的数据。

2、实现方式

假设我们在父窗口中有一个输入框，用户在其中输入了一些数据，然后点击按钮打开子窗口，子窗口将读取这个输入框中的数据。

父页面（parent.html）

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Parent Page</title>


</head>


<body>


    <input type="text" id="inputValue" value="Hello, World!">


    <button onclick="openChild()">Open Child Page</button>


    <script>


        function openChild() {


            window.open('child.html', 'childWindow', 'width=600,height=400');


        }


    </script>


</body>


</html>

子页面（child.html）

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Child Page</title>


</head>


<body>


    <h1>Child Page</h1>


    <p id="parentValue"></p>


    <script>


        window.onload = function() {


            var parentValue = window.opener.document.getElementById('inputValue').value;


            document.getElementById('parentValue').innerText = parentValue;


        };


    </script>


</body>


</html>

在子页面的window.onload事件中，通过window.opener访问父页面的元素，并获取其值。

二、使用window.parent

window.parent属性返回当前窗口的父窗口。如果子页面是通过<iframe>嵌入在父页面中的，可以使用window.parent来访问父页面的值。

1、使用场景

window.parent适用于子页面通过<iframe>标签嵌入到父页面中的情况。这种方法通常用于在一个页面中嵌入多个子页面，并且需要在子页面中获取父页面的数据。

2、实现方式

假设我们在父页面中有一个<iframe>标签嵌入了一个子页面，子页面需要获取父页面中的某个输入框的值。

父页面（parent.html）

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Parent Page</title>


</head>


<body>


    <input type="text" id="inputValue" value="Hello, World!">


    <iframe src="child.html" width="600" height="400"></iframe>


</body>


</html>

子页面（child.html）

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Child Page</title>


</head>


<body>


    <h1>Child Page</h1>


    <p id="parentValue"></p>


    <script>


        window.onload = function() {


            var parentValue = window.parent.document.getElementById('inputValue').value;


            document.getElementById('parentValue').innerText = parentValue;


        };


    </script>


</body>


</html>

在子页面的window.onload事件中，通过window.parent访问父页面的元素，并获取其值。

三、使用localStorage

localStorage是Web Storage API的一部分，允许在客户端存储数据。它可以在同一域名下的不同页面之间共享数据。

1、使用场景

localStorage适用于需要在同一域名下的多个页面之间共享数据的情况。与window.opener和window.parent不同，localStorage不依赖于页面之间的父子关系。

2、实现方式

假设我们在父页面中有一个输入框，用户在其中输入了一些数据，然后点击按钮打开子页面，子页面将读取这个输入框中的数据。

父页面（parent.html）

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Parent Page</title>


</head>


<body>


    <input type="text" id="inputValue" value="Hello, World!">


    <button onclick="openChild()">Open Child Page</button>


    <script>


        function openChild() {


            var inputValue = document.getElementById('inputValue').value;


            localStorage.setItem('parentValue', inputValue);


            window.open('child.html', 'childWindow', 'width=600,height=400');


        }


    </script>


</body>


</html>

子页面（child.html）

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Child Page</title>


</head>


<body>


    <h1>Child Page</h1>


    <p id="parentValue"></p>


    <script>


        window.onload = function() {


            var parentValue = localStorage.getItem('parentValue');


            document.getElementById('parentValue').innerText = parentValue;


        };


    </script>


</body>


</html>

在父页面中，通过localStorage.setItem()方法将数据存储到localStorage中。在子页面的window.onload事件中，通过localStorage.getItem()方法读取存储的数据。

四、使用PostMessage

postMessage方法允许在不同窗口之间安全地进行跨域通信。

1、使用场景

postMessage适用于需要在不同源（origin）之间进行通信的情况。它可以用于在不同域名、子域名或协议的页面之间传递数据。

2、实现方式

假设我们在父页面中有一个输入框，用户在其中输入了一些数据，然后点击按钮发送数据到子页面。

父页面（parent.html）

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Parent Page</title>


</head>


<body>


    <input type="text" id="inputValue" value="Hello, World!">


    <button onclick="openChild()">Open Child Page</button>


    <script>


        function openChild() {


            var inputValue = document.getElementById('inputValue').value;


            var childWindow = window.open('child.html', 'childWindow', 'width=600,height=400');


            childWindow.onload = function() {


                childWindow.postMessage(inputValue, '*');


            };


        }


    </script>


</body>


</html>

子页面（child.html）

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Child Page</title>


</head>


<body>


    <h1>Child Page</h1>


    <p id="parentValue"></p>


    <script>


        window.addEventListener('message', function(event) {


            var parentValue = event.data;


            document.getElementById('parentValue').innerText = parentValue;


        });


    </script>


</body>


</html>

在父页面中，通过postMessage()方法将数据发送到子页面。在子页面中，通过window.addEventListener('message', callback)方法接收数据。

五、总结

在JavaScript中，子页面获取父页面的值可以通过多种方法实现，包括window.opener、window.parent、localStorage和postMessage。每种方法都有其特定的应用场景和优缺点。

  • window.opener适用于通过window.open()方法打开的新窗口或子页面。
  • window.parent适用于子页面通过<iframe>标签嵌入到父页面中的情况。
  • localStorage适用于需要在同一域名下的多个页面之间共享数据的情况。
  • postMessage适用于需要在不同源（origin）之间进行通信的情况。

在选择具体方法时，应根据实际需求和应用场景进行权衡和选择。无论选择哪种方法，都需要注意数据的安全性和正确性，确保应用程序的稳定性和可靠性。

相关问答FAQs：

1. 如何在JavaScript子页面中获取父页面的值？
JavaScript子页面可以通过以下方法获取父页面的值：

  • 使用window.parent对象来访问父页面的全局变量或函数。例如，如果父页面定义了一个名为parentValue的全局变量，子页面可以通过window.parent.parentValue来获取其值。

  • 使用window.opener对象来访问打开当前子页面的父窗口的全局变量或函数。例如，如果父页面定义了一个名为openerValue的全局变量，子页面可以通过window.opener.openerValue来获取其值。

  • 使用window.postMessage()方法来在父页面和子页面之间进行跨文档通信。通过在父页面中使用postMessage()方法发送消息，子页面可以通过监听message事件来接收消息，并从中获取所需的值。

2. 如何在JavaScript子页面中获取父页面的表单值？
如果父页面包含表单元素（如输入框、下拉列表等），子页面可以通过以下方法获取其值：

  • 使用window.parent.document.getElementById()方法来获取父页面表单元素的值。例如，如果父页面中有一个id为parentInput的输入框，子页面可以使用window.parent.document.getElementById('parentInput').value来获取其值。

  • 如果父页面包含多个表单元素，可以通过遍历父页面表单元素的方式获取所需的值。可以使用window.parent.document.forms属性获取父页面所有的表单，然后使用elements属性获取表单元素集合，进而遍历获取各个表单元素的值。

3. 如何在JavaScript子页面中获取父页面的URL参数值？
父页面的URL参数可以通过以下方式在JavaScript子页面中获取：

  • 使用window.location.search属性获取当前页面URL中的查询字符串部分。例如，如果父页面URL为http://example.com/page.html?param1=value1&param2=value2，子页面可以使用window.location.search获取?param1=value1&param2=value2。

  • 使用URLSearchParams对象来解析查询字符串并获取参数值。可以使用new URLSearchParams(window.location.search)创建一个URLSearchParams对象，然后使用get()方法获取具体的参数值。例如，如果需要获取param1的值，可以使用new URLSearchParams(window.location.search).get('param1')。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3750660

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部