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中取前n天日期的两种方法分享
Jan 26 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
Fetch超时设置与终止请求详解
May 18 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
Vue路由权限控制解析
Nov 09 Javascript
JS canvas实现画板和签字板功能
Feb 23 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
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
PHP7 弃用功能
2021/03/09 PHP
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
微信小程序实现登录注册功能
2020/12/29 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
Python threading的使用方法解析
2019/08/28 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
单位介绍信范文
2014/01/18 职场文书
2014升学宴答谢词
2014/01/26 职场文书
文明餐桌活动方案
2014/02/11 职场文书
2016春节放假通知范文
2015/08/18 职场文书