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与CSS写在同一个文件里的书写方法
Jun 02 Javascript
JavaScript基本编码模式小结
May 23 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
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
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
用python代码做configure文件
2014/07/20 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
python 通过exifread读取照片信息
2020/12/24 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
合同意向书范本
2014/07/30 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
试了下Golang实现try catch的方法
2021/07/01 Golang
nginx配置限速限流基于内置模块
2022/05/02 Servers
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers