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中字符串拼接需注意的问题
Jul 13 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
javascript填充默认头像方法
Feb 22 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
react国际化react-intl的使用
May 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笔记之:数据类型与常量的使用分析
2013/05/14 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
php实现的操作excel类详解
2016/01/15 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
dojo随手记 gird组件引用
2011/02/24 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
详解node中创建服务进程
2017/05/09 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
python3实现磁盘空间监控
2018/06/21 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
python3.7.0的安装步骤
2018/08/27 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
python名片管理系统开发
2020/06/18 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
高中的职业生涯规划书
2013/12/28 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
培训讲师岗位职责
2014/04/13 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
Python基础之字符串格式化详解
2021/04/21 Python