JS子窗口调用父窗口的方法

有两种情况：

一，框架（iframe）形式，这时用到是window.parent，详情如下：

1，1.html代表的是父窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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 name="form1"
id="form1"> 
   <input
type="text" name="username" id="username"
/> 
</form> 
<iframe src="2.html"
width="100%">
</body>
</html

2，2.html代表的子窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>子页面</title>

<script type="text/javascript">
 function changeValue(val){
  var _parentWin = window.parent
;  
  _parentWin.form1.username.value
= val ;
 }
</script>
</head>

<body>
<input type="file" name="filename"
onchange="changeValue(this.value);" />
</body>
</html>

这时在子窗口（iframe窗口）所做的改变，会改变父窗口中username的值。

二，新开窗口形式，这时用到是window.opener，详情如下：

1，1.html代表的是父窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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 name="form1"
id="form1"> 
   <input
type="text" name="username" id="username"
onclick="window.open(‘2.html‘);"
/> 
</form> 
<!-- <iframe src="2.html"
width="100%"></iframe>
-->
</body>
</html

2，2.html代表的是子窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>子页面</title>

<script type="text/javascript">
 function changeValue(val){
  var _parentWin
=  window.opener
;  
  _parentWin.form1.username.value
= val ;
 }
</script>
</head>

<body>
<input type="file" name="filename"
onchange="changeValue(this.value);" />
</body>
</html>

这时，在新开的子窗口页面中，选择浏览按钮选择文件后，父窗口的username中值会是你选择的文件地址，这里我们可以根据实际需要，进行改变，比如在上传成功后，将生成的文件名放到父窗口的username字段中，以便插入数据库等等。

上面两种情况都是子窗口改变父窗口的内容，其实和子窗口调用父窗口的元素是一样的道理，这里我以window.open新开窗口的形式，让子窗口调用父窗口的元素值。

1，1.html父窗口 代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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 name="form1"
id="form1"> 
   <input
type="text" name="username" id="username" value="胡宇轩"
onclick="window.open(‘2.html‘);"
/> 
</form> 
<!-- <iframe src="2.html"
width="100%"></iframe>
-->
</body>
</html>

2，2.html子窗口，代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>子页面</title>

<script type="text/javascript">
 function changeValue(){
  var _parentWin
=  window.opener ; 
  var obj =
document.getElementByIdx_x("myname");
  obj.value =
_parentWin.form1.username.value;
 }
</script>
</head>

<body
>
<input type="text" name="myname" id="myname"
/>
</body>
</html>

当新开窗口时，子窗口加载时，子窗口的myname值会调用父窗口中的username值“胡宇轩”，这只是个例子，具体也根据实际情况调用父窗口的其他元素内容。

时间： 2024-10-25 14:51:09

JS子窗口调用父窗口的方法的相关文章

react ，父子调用子组件的方法与子组件调用父组件的方法

1.父组件调用子组件的方法给子组件的标签 定义一个属性,例如 ref="zizu" ------------- 父组件通过,this.refs.biaoji.dream('哈哈') //调用子组件的dream方法 2.子组件调用父组件的方法 2.1.首先父组件需要通过给子组件自定义属性,把方法传递给子组件.2.2.子组件通过this.props 接收父组件的方法,this.props.方法名称().这样就可以调用父组件的方法了 原文地址:https://www.cnblogs.com/

JavaScript子窗口调用父窗口变量和函数的方法

在做一个父窗口开启子窗口并且在子窗口关闭的时候调用父窗口的方法,达到局部刷新的目的. 父窗口: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns=" http://www.w3.org/1999/xhtml&qu

Qt 代码： 子窗口调用父窗口（其实就是用指针直接访问）

之前的 Qt 编程大多只涉及简单的多窗口,并未染指窗口间的传值交互,想来还是“涉世未深”,对 Qt 的理解.应用还需殷勤努力. 这次的问题是这样的,我想要实现一个类似QQ.阿里旺旺的聊天客户端,在弹出表情对话框后,能够选择表情并返回给聊天窗口的消息输入框,这就需要两个窗口之间的传值交互. 首先想到的解决方法自然是使用Qt自带的signal/slot机制.即首先发信号给父窗口,父窗口接到信号执行槽函数发送一个携带所需数据的信号给子窗口.但是疑问来了:要在子窗口中接收到父窗口的信号必须进行signa

Vue子组件调用父组件的方法

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 复制代码 <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child }, methods: { fathe

在IFream中，子页面调用父页面的方法

工作中遇到的具体情况是,父页面中的菜单点击,在框架中打开子页面.子页面保存新增的数据后,打开父页面的另一个子页面,此时要调用父页面菜单点击事件. var _parent = window.parent; //获得父页面的对象 _parent.父页面中的方法

Appcan学习笔记（2）——子页面调用父页面的方法

index.html 为父页面,里面有div为<div id="content" class="ub-f1"> </div>此div承载子页面 index_content.html 在子页面中调用父页面中的UpdateData()方法 ,par为参数 appcan.window.evaluateScript({            name:'',            scriptContent:'UpdateData("'+p

关于子页面调用父页面的方法

http://bbs.csdn.net/topics/350230944 如果是append进来的,那么父页面的方法直接 头部 头部 菜单栏 子页面(通过append方法写入的) 写在子页面即可 同时别忘记了冒泡时间,如果直接加上click是不生效的.或者生效延时 $(document).on('click','.but',function(){ alert($(this).attr("id")); window.openr.getDiv("ticketDetail"

子窗口调用父窗口

相信学计算机的大学生都碰过这样的编程作业吧…… “程序运行后主窗口隐藏,然后弹出登录框,输入账号密码登陆成功后再关闭登陆框,然后让之前隐藏的主窗口重新显示.” 没错,我当时就是这么笨,怎么都想不到好的解决办法……当时的同学都是不管之前隐藏的主窗口,而是直接新建了一个主窗口…… 刚好昨晚在做项目时碰到类似的情况,就在这写一个超级简单的方法吧…… private void img_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {

子窗口调用父页面js实例

父页面代码: <%@ page contentType="text/html; charset=GBK"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>new_page_title</title> <script type="