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 一道字符串分解的题目
Aug 03 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
vscode 调试 node.js的方法步骤
Sep 15 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 ftp文件上传函数(基础版)
2010/06/03 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
JS中==与===操作符的比较
2009/03/21 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
如何编写jquery插件
2017/03/29 jQuery
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
简单讲解Python中的闭包
2015/08/11 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
投标邀请书范文
2014/01/31 职场文书
餐厅筹备计划书
2014/04/25 职场文书
长城导游词300字
2015/01/30 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
小学教师教学反思
2016/02/24 职场文书
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android