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.
作者最新文章
JS怎么实现页面强制刷新
2026-11-05 14:53:38
点击JS链接直接运行不下载?前端实现.js文件强制下载的三种方法
2026-11-05 12:12:23
怎么封装一个通用的JS创建元素辅助函数
2026-11-05 11:41:41
Swiper.js 怎么监听滑动结束并获取当前索引
2026-11-05 10:57:15
HTML、CSS和JS的关系:Web前端三件套怎么协作
2026-11-04 15:41:40
