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 硬盘序列号+其它硬件信息
Dec 23 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
JS重要知识点小结
Nov 06 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 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
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
Python多层装饰器用法实例分析
2018/02/09 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
网站设计师的岗位职责
2013/11/21 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
cf收人广告词
2014/03/14 职场文书
公司门卫工作职责
2014/06/28 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
教师党员个人整改措施
2014/10/27 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
会计专业自荐信范文
2015/03/05 职场文书
小马王观后感
2015/06/11 职场文书
关于python类SortedList详解
2021/09/04 Python