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实现禁止输入中文或英文的例子
Dec 09 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
video.js 一个页面同时播放多个视频的实例代码
Nov 27 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中模拟POST传递数据的两种方法分享
2011/09/16 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python图像处理之反色实现方法
2015/05/30 Python
Python实现自动发送邮件功能
2021/03/02 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
Python中的TCP socket写法示例
2018/05/11 Python
Django中的Model操作表的实现
2018/07/24 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
详解python tkinter 图片插入问题
2020/09/03 Python
Python常用外部指令执行代码实例
2020/11/05 Python
学生周末长期请假条
2014/02/15 职场文书
公积金接收函格式
2015/01/30 职场文书
安全教育培训心得体会
2016/01/15 职场文书
思想品德课教学反思
2016/02/24 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
Java字符串逆序方法详情
2022/03/21 Java/Android