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_03(ExtJs Grid的简单使用)
Oct 02 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
微信小程序系列之自定义顶部导航功能
May 21 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
详解CocosCreator消息分发机制
Apr 16 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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
基于PHP制作验证码
2016/10/12 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python解决鸡兔同笼问题的方法
2014/12/20 Python
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
几个常见的软件测试问题
2016/09/07 面试题
《自然之道》教学反思
2014/02/11 职场文书
职称评定自我鉴定
2014/03/18 职场文书
五年级学生评语
2014/04/22 职场文书
竞选学委演讲稿
2014/09/13 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang