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 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
vue render函数动态加载img的src路径操作
Oct 26 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
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
Zend的Registry机制的使用说明
2013/05/02 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
flask 实现token机制的示例代码
2019/11/07 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
生物技术专业毕业生求职信范文
2013/12/14 职场文书
企业金融服务方案
2014/06/03 职场文书
假释思想汇报范文
2014/10/11 职场文书
高三英语复习计划
2015/01/19 职场文书
故宫导游词
2015/01/31 职场文书
入党介绍人意见2015
2015/06/01 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python