JS父页面与子页面相互传值方法


Posted in Javascript onMarch 05, 2014

一、子页面是父页面通过window.open弹出的情况
子页面要向父页面传值,只要在document前面加window.opener即可。
如:
1.父页面代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
head>
<script language="javascript">
function tanchu()
{
    window.open("Untitled-5.html");  
}
script>
<body>
    <form id="form1" name="form1" method="post" action="">
        <label> <input type="submit" name="button" id="button" value="提交"
            onclick="tanchu()" />
        label> <label> <input type="text" name="textfield" id="textfield" />
        label>
    form>
</body>
</html>
2.子页面代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
head>
<script language="javascript">
function aaa()
{
    window.opener.document.getElementByIdx('textfield').value='123123123';
}
script>
<body>
    <form id="form1" name="form1" method="post" action="">
        <label> <input type="submit" name="button" id="button" value="提交"
            onclick="aaa()" />
        label>
    form>
</body>
</html>
二、子页面是iframe框架中的页面情况

子页面要向父页面传值,只要在document前面加parent即可。
1.父页面代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
head>
<body>
    <form id="form1" name="form1" method="post" action="">
        <label> <input type="text" name="textfield" id="textfield" />
        label>
        <iframe id="myiframe" src="Untitled-3.html">iframe>
    form>
</body>
</html>
2.子页面代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
head>
<script language="javascript">
function aa()
{
    var a=parent.document.getElementByIdx('textfield').value;
    alert(a);
}
script>
<body>
    <form id="form1" name="form1" method="post" action="">
        <label> <input type="submit" name="button" id="button" value="提交"
            onClick="aa()" />
        label>
    form>
</body>
</html>

Javascript 相关文章推荐
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
table行随鼠标移动变色示例
May 07 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
JS和函数式语言的三特性
Mar 05 #Javascript
jquery 使用简明教程
Mar 05 #Javascript
jquery form表单序列化为对象的示例代码
Mar 05 #Javascript
js对文章内容进行分页示例代码
Mar 05 #Javascript
JavaScript获取XML数据附示例截图
Mar 05 #Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 #Javascript
javascript日期格式化示例分享
Mar 05 #Javascript
You might like
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
python爬虫常用的模块分析
2014/08/29 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
python实现动态创建类的方法分析
2019/06/25 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
Python pandas库中的isnull()详解
2019/12/26 Python
keras K.function获取某层的输出操作
2020/06/29 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
文秘专业毕业生就业推荐信
2013/11/08 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
MySQL表字段时间设置默认值
2021/05/13 MySQL