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_01_理解内存分配原理分析
Oct 11 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
JavaScript简介
Feb 15 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 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 socke 向指定页面提交数据
2008/07/23 PHP
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
Python struct.unpack
2008/09/06 Python
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
Python 查看文件的编码格式方法
2017/12/21 Python
python中requests和https使用简单示例
2018/01/18 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
如何用Python绘制3D柱形图
2020/09/16 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
《三袋麦子》教学反思
2014/03/02 职场文书
本科生自荐信
2014/06/18 职场文书
文体活动总结
2015/02/04 职场文书
2015年仓库工作总结
2015/04/09 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
利用python做数据拟合详情
2021/11/17 Python