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 设计模式 富有表现力的Javascript(一)
May 26 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
简介JavaScript错误处理机制
Aug 04 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
PHP4引用文件语句的对比
2006/10/09 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
如何在PHP中读写文件
2020/09/07 PHP
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python中的错误处理
2016/04/10 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
学python爬虫能做什么
2020/07/29 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
学习党课思想汇报
2013/12/29 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
创业计划书之美甲店
2019/09/20 职场文书
关于JavaScript轮播图的实现
2021/11/20 Javascript