`

Javascript window 对象+ 父子窗口之间相互操作

 
阅读更多
例1 用window.open()打开的父子窗口
test.html
<html>
<head>
</head>
<body>
<input type="button" onclick="show(this)" value="blue"/>
<input type="button" onclick="show(this)" value="green"/>
<input type="button" onclick="show(this)" value="red"/>
<script>
var subwin = window.open('sub.html','_blank','top=50,left=50,height=50,width=50');
function show(obj){
	subwin.document.bgColor=obj.value;
}
function test(){
	window.document.title='4444';
}
</script>
</body>
</html>



sub.html
<html>
<head>
<style>

</style>
</head>
<body>
<input type="button" onclick="show(this)" value="blue"/>
<input type="button" onclick="show(this)" value="green"/>
<input type="button" onclick="show(this)" value="red"/>
<input type="button" onclick="opener.test()" value="test"/>
<script>
function show(obj){
	opener.document.bgColor=obj.value;
}
</script>
</body>
</html>




例2 用frame打开的父子窗口
test.html
<frameset rows="100,*">
	<frame name="top" src="">
	<frameset cols="150,*">
		<frame name="menu" src="menu.html">
		<frame name="main" src="">
	</frameset>
</frameset>


menu.html
<input type="button" onclick="window.parent.frames[0].document.bgColor='green'" value="changetop"/>
<input type="button" onclick="window.document.bgColor='red'" value="changeself"/>
<input type="button" onclick="window.top.main.document.bgColor='blue'" value="changemain"/>
分享到:
评论

相关推荐

    window.open父子窗口传值问题

    当我们谈论“window.open父子窗口传值问题”,我们指的是在父窗口通过`window.open`创建了一个子窗口,并需要在两者之间进行数据通信的情况。 首先,让我们了解一下`window.open`的基本语法: ```javascript var ...

    javascript 父窗口、子窗口传值问题

    在JavaScript编程中,父窗口与子窗口之间的通信是一种常见的需求,特别是在构建多...在实际应用中,根据场景和安全性要求选择合适的方法进行父子窗口间的通信。同时,要确保遵循同源策略,因为跨域通信可能会受到限制。

    js 控制父子窗口 转向

    在JavaScript编程中,控制父子窗口之间的交互是一种常见的需求,特别是在构建多窗口应用程序或者框架页面时。标题"js 控制父子窗口 转向"所涉及的知识点主要集中在如何使用JavaScript来实现子窗口对父窗口的控制,...

    jquery父子窗口互相获取元素demo

    在这个“jquery父子窗口互相获取元素demo”中,我们将深入探讨如何利用jQuery来实现在父窗口与子窗口之间共享和操作DOM元素。 首先,`test.html`和`Untitled-1.html`可能是包含jQuery示例的两个网页文件。通常,父...

    javascript父子页面传参

    在JavaScript编程中,父子页面之间的通信是一个常见的需求,特别是在单页应用(SPA)或框架如Vue、React和Angular中。本篇文章将详细讲解如何在父子页面之间传递参数,并通过提供的DEMO文件(a.html、c.html、b.html...

    js操作模态窗口及父子窗口间相互传值示例

    本文将详细介绍如何使用JavaScript来操作模态窗口,并实现父子窗口之间的数据传递。 首先,我们要了解什么是模态窗口以及如何创建一个模态窗口。在上述示例中,父窗口通过`window.showModalDialog`方法弹出了一个...

    iframe的父子窗口之间的对象相互调用基本用法

    下面我们将详细讨论`iframe`的父子窗口之间对象相互调用的基本用法。 1. **子窗口调用父窗口的JS方法**: 子窗口可以通过`parent`关键字来访问父窗口的全局对象和方法。例如,假设在子窗口中有这样一个方法调用: ...

    ie 模态弹窗 父子窗口交换数据

    这里,我们专注于一个特定的场景:`ie 模态弹窗 父子窗口交换数据`。模态弹窗(通常称为 modal window)是在当前页面上打开的新窗口,它阻止用户与背景页面交互,直到弹窗关闭。在Internet Explorer(IE)浏览器中,...

    javascript提交父窗口

    窗口对象与父子窗口关系 在 Web 开发中,一个网页可以打开其他窗口或弹出新窗口。这些窗口之间存在一种父子关系。打开新窗口的页面被称为父窗口,而被打开的新窗口则被称为子窗口。这种关系主要通过 `window.open...

    HTML中IFrame父窗口与子窗口相互操作

    这种父子窗口的交互方式对于实现复杂网页应用,如页面内嵌、跨域通信等场景非常常见。以下将详细介绍如何在HTML中进行`&lt;iframe&gt;`父窗口与子窗口之间的交互操作。 首先,我们来看一些通用的方法: 1. **获取子窗口...

    动态增删table以及后台传值和弹出窗口父子窗口传值

    在IT行业中,动态增删table和后台传值是前端与后端交互的重要技术,而弹出窗口父子窗口之间的数据传递则是提升用户体验的关键。下面将详细解释这些知识点。 首先,动态增删table是一种常见的用户界面设计,它允许...

    window.showModalDialog以及window.open用法简介

    在网页开发中,有时我们需要打开新的窗口或者弹出对话框来与用户进行交互。`window.showModalDialog`和`window.open`是JavaScript中用于...在处理父子窗口间的通信时,两者都可以利用`window.opener`属性实现数据交换。

    详解layui弹窗父子窗口之间传参数的方法

    layui 弹窗父子窗口之间传参数的方法 layui 是一个非常流行的前端框架,它提供了许多实用的功能,例如弹窗功能。弹窗功能可以让用户在当前页面打开一个新的窗口,以便进行一些操作。但是,在layui 弹窗父子窗口之间...

    子窗口通过js操作父窗口中的元素

    - 对于更复杂的父子窗口交互,可以利用`localStorage`或`sessionStorage`进行数据共享。 8. **最佳实践**: - 确保你的代码遵循W3C标准,确保兼容性。 - 避免过度依赖JavaScript,提供适当的降级处理,以便在...

    ie+FF通用的父子模态对话框相互传值

    总的来说,实现"ie+FF通用的父子模态对话框相互传值"涉及到JavaScript的事件处理、跨窗口通信和CSS的模态设计。理解这些知识点并熟练运用,能帮助开发者创建出更好的交互体验。同时,要时刻关注浏览器的兼容性和最佳...

    HTML 父窗口打开子窗口,并接收子窗口返回的值.zip

    在web服务器上,所有文件被视为同一域,从而允许父子窗口之间的通信。 综上所述,这个压缩包提供的示例展示了如何在HTML页面中使用JavaScript打开子窗口,以及如何在子窗口与父窗口之间通过`postMessage()`和`...

    Layui实现父子页面之间值传递.zip

    // 获取子页面的window对象 win.postMessage(data, '*'); // 使用postMessage传递数据 } }); }); } ``` 在子页面(child.html)中,我们需要监听 `message` 事件来接收父页面传递过来的数据。这个事件会在子...

    父子页面数据相互传递

    3. `postMessage` API:这是一种跨窗口通信的方式,允许父子页面之间发送和接收消息。父页面可以通过`window.open`创建子页面,并监听`message`事件接收子页面发送的数据;子页面则可以调用`window.parent.post...

Global site tag (gtag.js) - Google Analytics