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——表单应用范例
Feb 20 Javascript
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
javascript学习之json入门
Dec 22 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 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排序算法的复习和总结
2012/02/15 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
python采用getopt解析命令行输入参数实例
2014/09/30 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
军训鉴定表自我鉴定
2014/02/13 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
大一学生个人总结
2015/02/15 职场文书
XX部保密工作制度范本
2019/08/27 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
python实现调用摄像头并拍照发邮箱
2021/04/27 Python