JS父页面与子页面相互传值方法

 这篇文章主要介绍了使用JS在父页面和子页面间相互传值方法,子页面可以是window.open弹出的,也可以是iframe框架中的页面,需要的朋友可以参考下

一、子页面是父页面通过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>

时间: 2024-10-31 12:06:20

JS父页面与子页面相互传值方法的相关文章

js父页面与子页面不同时显示的方法_javascript技巧

本文实例讲述了js父页面与子页面不同时显示的方法,可实现打开一个页面后,父页面DISABLE,在子页面关闭后,父页面ENABLE.分享给大家供大家参考.具体方法如下: 复制代码 代码如下: function onNewClick() {     var url = "VesselScheduleNEW.aspx";     if (null!=newWin && newWin.closed) newWin=null;        if (null==newWin)  

js中iframe框架子页面中调用父窗口函数

分两种情况: 第一种:在iframe子页面调用父页面js函数: 子页面调用父页面函数只需要写上window.praent就可以了.比如调用a()函数,可以写成:  代码如下 复制代码 window.praent.a(); a()为方法: 第二种:在iframe子父页面调用子页面js函数: 这个要稍微复杂些,我们可以用:  代码如下 复制代码 document.getElementById('ifrtest').contentWindow.b(); 注:ifrtest是iframe框架的id,b(

两个JSP页面父页面获取子页面内容的两种方法

 需求说明:两个JSP页面,父页面需要子页面的内容,但子页面是隐藏的,具体来说,子页面是一系列的模板,父页面要通过id来获取这些模板,不愿意通过<include>方式导入,因为如果模板过多,就导致整个父页面太大,加载缓慢,以下两个方案,不知有没有解决这个问题. 1.通过ajax方式 实现过程:通过ajax请求到子页面中,子页面获取参数id使用java和js变量的交互后,返回需要的模板信息 缺点:把js变量转换成java变量比较麻烦,需要使用form表单来提交,而且jsp中的java脚本是在服务

javascript-JS中父页面的调用子页面的子页面,有办法吗?

问题描述 JS中父页面的调用子页面的子页面,有办法吗? 我在一个页面调用这个方法(方法是子页面的子页面的)obj_frm["frm_"+CallID].ReceiveData(Data),报错对象不支持"ReceiveData"属性或方法.应该怎么修改呢? 解决方案 没有大神知道吗?T^T 解决方案二: 你的意思是说子页面全部都是frame? 那么直接一级级下去就行了啊 解决方案三: js 刷新子页面----------------------

Iframe父页面与子页面之间的调用

原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者iframe标签),浏览器就会为原始文档创建一个window对象,再为每个iframe创建额外的window对象,这些额外的window对象是原始窗口的子窗口. conte

父窗口与子窗口相互调用js代码(1/3)

父页面调用子页面中的js 我们先创建一个子窗体 复制代码 代码如下: var win $(function () { root = $('#root').val();//设置根目录 }); function openplayer(id, type, add) { //这里是用来限制同一个窗口只能弹出一次的 //其实就算不做限制,只要window.open参数中的name相同,就不会重复打开 //window.open中的参数可以参考别的文章,有很多 if (win == null || win.

两个JSP页面父页面获取子页面内容的两种方法_JSP编程

需求说明:两个JSP页面,父页面需要子页面的内容,但子页面是隐藏的,具体来说,子页面是一系列的模板,父页面要通过id来获取这些模板,不愿意通过<include>方式导入,因为如果模板过多,就导致整个父页面太大,加载缓慢,以下两个方案,不知有没有解决这个问题. 1.通过ajax方式 实现过程:通过ajax请求到子页面中,子页面获取参数id使用java和js变量的交互后,返回需要的模板信息 缺点:把js变量转换成java变量比较麻烦,需要使用form表单来提交,而且jsp中的java脚本是在服务器

iframe父页面获取子页面参数的方法

 这篇文章主要介绍了iframe父页面获取子页面参数的方法,需要的朋友可以参考下 1.父页面中的iframe  代码如下: <iframe name="parentPage"></iframe>    2.子页面中元素的属性   代码如下: <input type="text" id="date" data-dojo-type="dijit/form/DateTextBox" value=&quo

iframe 父窗口和子窗口相互的调用方法集锦_javascript技巧

一.父窗口调用iframe子窗口方法 1.HTML语法:<iframe name="myFrame" src="child.html"></iframe> 2.父窗口调用子窗口:myFrame.window.functionName(); 3.子窗品调用父窗口:parent.functionName(); 简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行 4.父窗口页面源码: 复制代码 代码如下: <html>