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 相关文章推荐
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
js+canvas绘制图形验证码
Sep 21 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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
zf框架的Filter过滤器使用示例
2014/03/13 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
Python读取指定日期邮件的实例
2019/02/01 Python
python实现LRU热点缓存及原理
2019/10/29 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Pycharm Git 设置方法
2020/09/15 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
结构和类有什么异同
2012/07/16 面试题
新闻专业本科生的自我评价分享
2013/11/20 职场文书
小学班主任寄语大全
2014/04/04 职场文书
刑事案件上诉状
2015/05/23 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
护理工作心得体会
2016/01/22 职场文书
python中pymysql包操作数据库方法
2022/04/19 Python
Java 定时任务技术趋势简介
2022/05/04 Java/Android