JavaScript子页面获取父页面数据的方法

作者:交互手记时间:2026-10-28 10:50:18浏览:509

本文介绍在Web开发中,子页面如何获取父页面数据。通过父页面设置文本框,子页面利用window.opener对象访问父页面DOM元素,从而读取指定ID元素的value值,实现页面间数据交互。

在进行页面预览功能开发时,若数据未持久化至数据库,通常需通过打开新窗口进行预览。针对此场景,可通过特定技术实现子页面与父页面的数据交互。



父页面代码示例

1、父页面实现


具体代码实现如下:

 
<input type="text" id="name" value="zhangsan"/>
<a href="a.html" target="_blank">预览</a>

子页面获取数据代码

2、子页面(a.html)获取父页面文本框的值


具体代码实现如下:

 
$(function(){
console.info(window.opener.document.getElementById("name").value);
}); 

执行上述代码后,控制台将输出父页面文本框的值。



Don't hurry say have no choice, perhaps, next intersection will meet hope.

作者最新文章