JS父页面与子页面相互传值方法_父页面给子页面传值,父页面向子页面传值资源-CSDN文库

5星 · 超过95%的资源 129 浏览量 2020-10-26 04:34:53 上传评论 1 收藏 26KB PDF 举报

JavaScript（JS）是一种广泛用于网页和网络应用的脚本语言，尤其在处理页面交互和数据传递方面发挥着重要作用。在多页面应用或者嵌入式框架（如iframe）中，经常需要进行父页面与子页面之间的数据交换。下面将详细介绍如何在不同场景下使用JS实现这种传值。一、子页面是父页面通过`window.open`弹出的情况当子页面是通过`window.open()`函数打开时，我们可以使用`window.opener`属性来访问父页面的DOM元素。以下是一个简单的例子： 1. 父页面代码： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>父页面</title> <script> function openChildPage() { window.open("child.html"); } </script> <body> <form id="form1"> <input type="text" id="textfield"> <button onclick="openChildPage()">打开子页面</button> </form> </body> </html> ``` 2. 子页面代码： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>子页面</title> <script> function sendDataToParent() { window.opener.document.getElementById('textfield').value = '传递的数据'; } </script> <body> <form id="form1"> <button onclick="sendDataToParent()">向父页面传递数据</button> </form> </body> </html> ``` 在这个例子中，子页面通过`window.opener`获取到父页面的引用，并修改了父页面文本框的值。二、子页面是iframe框架中的页面情况如果子页面是作为iframe嵌入在父页面中，我们可以通过`parent`关键字来访问父页面的DOM元素。以下是示例： 1. 父页面代码： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>父页面</title> </head> <body> <form id="form1"> <input type="text" id="textfield"> <iframe id="myiframe" src="childiframe.html"></iframe> </form> </body> </html> ``` 2. 子页面（iframe）代码： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>子页面（iframe）</title> <script> function readDataFromParent() { var data = parent.document.getElementById('textfield').value; alert(data); } </script> <body> <form id="form1"> <button onclick="readDataFromParent()">从父页面读取数据</button> </form> </body> </html> ``` 在这个场景中，子页面通过`parent`访问父页面的文本框并弹出其值。需要注意的是，由于同源策略的限制，只有当父页面和子页面位于同一域下，才能直接通过JS进行通信。如果跨域，需要借助其他技术如CORS、JSONP或WebSocket等来实现数据传递。此外，出于安全考虑，现代浏览器可能限制某些跨窗口通信的功能，因此在实际开发中，应确保代码兼容性和安全性。

资源推荐

资源详情

资源评论