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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 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 is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
php实现aes加密类分享
2014/02/16 PHP
php中session退出登陆问题
2014/02/27 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
Python选课系统开发程序
2016/09/02 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
飞利浦美国官网:Philips美国
2020/02/28 全球购物
error和exception有什么区别
2012/10/02 面试题
建龙钢铁面试总结
2014/04/15 面试题
十八大报告观后感
2014/01/28 职场文书
人事助理自荐信
2014/02/02 职场文书
听课评语大全
2014/04/30 职场文书
归途列车观后感
2015/06/17 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
JavaScript设计模式之原型模式详情
2022/06/21 Javascript