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技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 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
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
JavaScript 实现??打印?理
2007/04/28 Javascript
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
Python操作CouchDB数据库简单示例
2015/03/10 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python递归下载文件夹下所有文件
2019/08/31 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
《春到梅花山》教学反思
2014/04/16 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
文明旅游倡议书
2015/04/28 职场文书
总结会主持词
2015/07/02 职场文书
教导处教学工作总结
2015/08/12 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
Java内存模型之happens-before概念详解
2021/06/13 Java/Android
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS