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 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
JS画5角星方法介绍
Sep 17 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 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
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
PHP概率计算函数汇总
2015/09/13 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
jQuery 对象中的类数组操作
2009/04/27 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
python装饰器decorator介绍
2014/11/21 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
对python模块中多个类的用法详解
2019/01/10 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
Python如何重新加载模块
2020/07/29 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
管理科学大学生求职信
2013/11/13 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
便利店促销方案
2014/02/20 职场文书
求职推荐信范文
2015/03/27 职场文书
运动会通讯稿300字
2015/07/20 职场文书
检讨书格式
2019/04/25 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技