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 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
Mootools 1.2教程 正则表达式
Sep 15 Javascript
jQuery select操作控制方法小结
May 26 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
vue实现底部菜单功能
Jul 24 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 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
php学习笔记 数组遍历实现代码
2011/06/09 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
jquery 上下滚动广告
2009/06/17 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
python中使用mysql数据库详细介绍
2015/03/27 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
招商业务员岗位职责
2013/12/16 职场文书
好邻里事迹材料
2014/01/16 职场文书
聘用意向书范本
2014/04/01 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
运动会跳远广播稿
2015/08/19 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers