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 特殊字符
Apr 05 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 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
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
js 文件引入实现代码
2010/04/23 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
python中将字典转换成其json字符串
2014/07/16 Python
Python入门篇之列表和元组
2014/10/17 Python
Python中的默认参数详解
2015/06/24 Python
Python中的zipfile模块使用详解
2015/06/25 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
python三方库之requests的快速上手
2019/03/04 Python
python实现AES加密与解密
2019/03/28 Python
给我一面国旗 python帮你实现
2019/09/30 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
生产部经理岗位职责
2013/12/16 职场文书
《四季》教学反思
2014/04/08 职场文书
比赛口号大全
2014/06/10 职场文书
工作时间调整通知
2015/04/24 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS