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 相关文章推荐
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
Nuxt使用Vuex的方法示例
Sep 06 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/11/27 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
php经典算法集锦
2015/11/14 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
javascript 闭包详解
2015/02/15 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
深入Python解释器理解Python中的字节码
2015/04/01 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
python实现自动化上线脚本的示例
2019/07/01 Python
python异常处理和日志处理方式
2019/12/24 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
VC++笔试题
2014/10/13 面试题
SQL面试题
2013/12/09 面试题
个人批评与自我批评总结
2014/10/17 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis