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实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
利用python分析access日志的方法
Oct 26 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
Vue CL3 配置路径别名详解
May 30 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调用Oracle存储过程
2006/10/09 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
PHP 无限级分类
2017/05/04 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
浅谈js中的bind
2019/03/18 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
python 模块重载的五种方法
2021/04/24 Python