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 相关文章推荐
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
jquery使用经验小结
May 20 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
通过js实现压缩图片上传功能
Feb 25 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 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 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
JSON辅助格式化处理方法
2013/03/26 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
js闭包用法实例详解
2016/12/13 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
python实现数据写入excel表格
2018/03/25 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
python实现查找所有程序的安装信息
2020/02/18 Python
python线程池如何使用
2020/05/28 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
办加油卡单位介绍信
2014/01/09 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
员工离职通知函
2015/04/25 职场文书
放牛班的春天观后感
2015/06/01 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers