窗口关系以及框架

最新推荐文章于 2025-04-27 17:32:49 发布
原创 最新推荐文章于 2025-04-27 17:32:49 发布 · 345 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#xhtml #javascript #php #ViewUI

本文深入探讨了浏览器窗口对象的概念，包括top、window、parent和self对象的关系及其应用，并通过实例展示了如何利用这些对象进行页面间的交互。

窗口关系以及框架

top对象：始终指向最高（最外）层的框架，也就是浏览器窗口。

window对象：指向的是哪个框架的特定实例。

parent（父）对象：始终指向当前框架的直接上层框架。

self对象：始终指向window，实际上，self和window对象可以互换使用。

所有这些对象都是window对象，可以通过window.parent、window.top等形式访问。同时，这也意味着可以将不同层次的window对象连缀起来，例如：window.parent.parent.frames[0].

 

页面的结构图：

 

以下代码是在Aptana中运行的，注意如果window.onload中写js代码的作用是保证已经加载完所有框架。

 

frameset.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS z-index Property</title> 
<script type = "text/javascript">
window.onload = function(){
	console.log("------result form frameset page-----------");
    var oFrame1 = document.getElementById("frame1");
    console.log(oFrame1.className);   //输出left
    console.log(oFrame1 == window.frames[0]);   //输出false，为什么会不相等？不是应该都是指第一个frame元素么？
    
    console.log(window.frames.length);   //输出2，说明有两个frame元素
    console.log(window.frames[0].className);   //输出undefinded,为什么不是left？
    
    //以上问题解答：（引用自：http://s.yanghao.org/program/viewdetail.php?i=270071）
    //document.getElementById("frame1")//获得的是页面元素 
	//window.frames[0]获得的是子窗体
	//两者的类型不一样
	
	 //self = top
	 console.log(window.frames[0].name);//topFrame
	 console.log(window.frames["topFrame"].name);//topFrame
	 console.log(top.frames[0].name);//topFrame
	 console.log(top.frames["topFrame"].name);//topFrame
	 console.log(frames[0].name);//topFrame
	 console.log(frames["topFrame"].name);//topFrame
	 console.log(self.frames[0].name);//topFrame
	 console.log(self.frames["topFrame"].name);//topFrame
	 
	 console.log(window.frames[1].name);//leftFrame
	 console.log(window.frames["leftFrame"].name);//leftFrame
	 console.log(top.frames[1].name);//leftFrame
	 console.log(top.frames["leftFrame"].name);//leftFrame
	 console.log(frames[1].name);//leftFrame
	 console.log(frames["leftFrame"].name);//leftFrame
	 console.log(self.frames[1].name);//leftFrame
	 console.log(self.frames["leftFrame"].name);//leftFrame
	 console.log("------result form frameset page-----------");
}
</script>
</head> 
<frameset rows="160,*">
	<frame id="frame1" class = "left" src="frame.html" name="topFrame" />
	<frameset cols="50%,50%">
		<frame src="anotherfame.html" name="leftFrame" />
		<frame src="yetanotherfame.html" name="rightFrame" />
	</frameset>
</frameset>

</html>

 

 frame.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>frame</title> 
<script type="text/javascript">
window.onload = function(){
	console.log("------result form frame page-----------");
	//parent == top
	console.log(window.parent.frames[0].name);//topFrame
	console.log(window.parent.frames["topFrame"].name);//topFrame
	console.log(top.frames[0].name);//topFrame
	console.log(top.frames["topFrame"].name);//topFrame
	
	console.log(window.frames[0].name);//subLeftFrame
	console.log(self.frames[0].name);//subLeftFrame
	console.log("------result form frame page-----------");//topFrame
}
</script>
</head> 
<frameset cols="50%,50%">
	<frame src="subfameLeft.html" name="subLeftFrame" />
	<frame src="subfameRight.html" name="subRightFrame" />
</frameset>
</html>

 

anotherfame.html

 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS z-index Property</title> 
<script type="text/javascript">
window.onload = function(){
	console.log("------result form anotherframe page-----------");
	//parent == top
	console.log(window.parent.frames[0].name);//topFrame
	console.log(window.parent.frames["topFrame"].name);//topFrame
	console.log(top.frames[0].name);//topFrame
	console.log(top.frames["topFrame"].name);//topFrame
	console.log("------result form anotherframe page-----------");
}
</script>
</head> 
<body>
	anotherfame.html
</body>
</html>
 

yetanotherfame.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>
    <title>测试图片加载顺序</title>
</head>
<body>
    yetanotherfame.html
</body>
</html>

 

subfameLeft.html

 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS z-index Property</title> 
<script type="text/javascript">
window.onload = function(){
	console.log("------result form subfameLeft page-----------");
	//parent != top
	console.log(window.parent.frames[0].name);//subLeftFrame
	console.log(window.parent.frames["subLeftFrame"].name);//subLeftFrame
	console.log(top.frames[0].name);//topFrame
	console.log(top.frames["topFrame"].name);//topFrame
	//console.log(window.parent.frames["topFrame"].name);//error
	//console.log(top.frames["subLeftFrame"].name);//error
	console.log("------result form subfameLeft page-----------");
}
</script>
</head> 
<body>
	subfameLeft.html
</body>
</html>

 window.open()：

既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。

这个方法接受四个参数：

 

  1. 要加载的URL、
  2. 窗口目标、
  3. 一个特定字符串
  4. 一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔。

 

参数2可以是一个窗口或框架的名称或者是下列任意一个特殊的窗口名称：_self、_parent、_top或者_blank。详细解析如下：

解释参数2的代码都是写在subfameLeft.html中

以下二者效果相同，即运行frameset.html页面时，整个页面是http://www.aia.com.vn/vn/的内容

 

window.open("http://www.aia.com.vn/vn/","_top");
top.location.href = "http://www.aia.com.vn/vn/";

 

以下二者效果相同，即运行frameset.html页面时，在frame的位置显示http://www.aia.com.vn/vn/的内容

 

parent.location.href = "http://www.aia.com.vn/vn/";
window.open("http://www.aia.com.vn/vn/","_parent");

以下效果相同：当运行frameset.html页面时，在subfameLeft位置显示http://www.aia.com.vn/vn/的内容

 

self.location.href = "http://www.aia.com.vn/vn/";
window.location.href = "http://www.aia.com.vn/vn/";
window.open("http://www.aia.com.vn/vn/","_self");

当运行frameset.html页面时，弹出一个新窗口http://www.aia.com.vn/vn/

 

window.open("http://www.aia.com.vn/vn/","_blank");
     

参数3：如果第二个参数并不是一个已经存在窗口或者框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或者标签页。如果没有传入参数3，那么就会打开一个带有全部默认设置（工具栏、地址栏和状态栏）的新浏览器窗口，在不打开新窗口的情况下，会忽略参数3，参数3是一个逗号分割的键值对（=连结键值对）的字符串。

 

channelmode=yes|no|1|0是否使用剧院模式显示窗口。默认为 no。
directories=yes|no|1|0是否添加目录按钮。默认为 yes。
fullscreen=yes|no|1|0是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels窗口文档显示区的高度。以像素计。
left=pixels窗口的 x 坐标。以像素计。
location=yes|no|1|0是否显示地址字段。默认是 yes。
menubar=yes|no|1|0是否显示菜单栏。默认是 yes。
resizable=yes|no|1|0窗口是否可调节尺寸。默认是 yes。
scrollbars=yes|no|1|0是否显示滚动条。默认是 yes。
status=yes|no|1|0是否添加状态栏。默认是 yes。
titlebar=yes|no|1|0是否显示标题栏。默认是 yes。
toolbar=yes|no|1|0是否显示浏览器的工具栏。默认是 yes。
top=pixels窗口的 y 坐标。
width=pixels窗口的文档显示区的宽度。以像素计。

 

例如：

 

window.open("http://www.aia.com.vn/vn/","_blank","height=400,width=400,top=10,left=10,resizeable=yes");
 

 

window.open()方法返回一个指向新窗口的引用，我们可以通过它对新窗口进行控制。

 

var wroxWin = window.open("http://www.aia.com.vn/vn/","_blank","height=400,width=400,top=10,left=10,resizeable=yes");

新创建的window对象有一个opener属性，其中保存着打开它的原始窗口对象。

 

 

判断弹出窗口是否被屏蔽

 

var blocked = false;
	try{
		var wroxWin = window.open("http://www.aia.com.vn/vn/","_blank");
		if(wroxWin == null){
			blocked = true;
		}
	}catch(ex){
		blocked = true;
	}
	if(blocked){
		alert("The popup was blocked");
	}
 

 

 

 

 

 

窗口视窗以及框架体系
08-19
在计算机编程领域，尤其是图形用户界面（GUI）的设计中，窗口、视图和框架体系是构建应用程序的基础元素。本文将深入探讨这些概念及其相互关系，为开发者提供宝贵的参考资料。 首先，我们来理解“窗口”（Window）...
JavaScript中的窗口关系和框架
洛神赋
06-21 1238
浏览器的全局对象是window,在全局作用域中声明的对象实际上都是都是挂载在window对象下。页面中如果包含多个框架，那么每一个框架都有自己的window对象。也就是每一个框架都有自己的全局作用对象。所有的框架都保存在frames集合上。每一个框架可以通过框架名访问，window.frames[framename];搜索frame的方法还是两种方式，绝对搜索和相对搜索。绝对搜索也就是针对最顶层的...
JavaScript高级程序设计之BOM之window 对象之窗口关系及框架 第8.1.2讲笔记
Jane617_min的专栏
10-13 1539
8.1.2 窗口关系及框架 如果页面中包含框架，则每个框架都拥有自己的window 对象，并且保存在frames 集合中。在frames 集合中，可以通过数值索引（从0 开始，从左至右，从上到下）或者框架名称来访问相应的window 对 象。每个window 对象都有一个name 属性，其中包含框架的名称。下面是一个包含框架的页面： Frameset Example
window对象（窗口关系及框架）
shengxiaokui的专栏
01-07 545
如果页面中有frames，则每个frames都拥有自己的window对象，并且保存在frames对象中。 可以用window.frames[0]或者window.frames[framesName]来引用框架
JavaScript窗口和框架
weixin_33726313的博客
07-27 161
54 改变浏览器状态栏文字提示 1&lt;script language=”JavaScript”&gt;2 window.status = “A new status message”;3&lt;/script&gt;  55 弹出确认提示框 1&lt;script language=”JavaScript”&gt;2 var userChoice = window.confirm(“Cl...
QML可拉伸、可拖拽为独立窗口的UI框架
03-27
在QML中，你可以构建可拉伸、可拖拽为独立窗口的UI框架，这使得应用程序的界面设计更加灵活和动态。QML结合了声明式语言的简洁性和JavaScript的编程能力，使开发者能够快速创建出美观且响应式的用户界面。 1. **...
dotnet 设置 X11 建立窗口之间的父子关系.rar
06-03
在.NET开发环境中，尤其是使用MAUI（Multi-Platform App UI）框架进行跨平台应用开发时，理解并掌握如何设置X11以建立窗口之间的父子关系是至关重要的。X11是一种广泛使用的窗口系统，主要用于Unix和Linux操作系统。...
框架窗口界面设计PPT课件.pptx
10-08
在Windows应用程序开发中，框架窗口界面...总的来说，MFC框架窗口界面设计涉及类的继承关系、项目组织结构、窗口状态管理和风格设定等多个方面，理解和掌握这些知识对于开发高效、用户友好的Windows应用程序至关重要。
窗口与框架
qq_43328996的博客
06-22 316
防止页面显示在框架中 <!DOCTYPE html> <html> <head> <title>A Simple Rollover</title> <script src="text.js"></script> </head> <body> <h1>A r...
javascript中的窗口和框架
weixin_30791095的博客
02-08 157
框架： 在网络上我们可以看到很多WEB应用程序都是使用框架（frame）来分隔浏览器窗口的，就想一块块玻璃隔板把窗口分隔成好几个小窗口，并且可以在不同的小窗口中加载显示不同的页面，这样在我们看来好像是一个完整的页面，但实际上它是由几个页面组合而成的。 javascript允许我们操作框架，在一个框架中定义的变量和函数可以在另一个框架中使用。这样做可以实现两个优点。 代码模块化...
5.窗口和框架
tianyitianyi1的专栏
03-12 503
<br />54 改变浏览器状态栏文字提示<br /><br />1: <script language="JavaScript"><br />2: window.status = "A new status message";<br />3: </script> <br /><br /><br />55 弹出确认提示框<br /><br />1: <script language="JavaScript"><br />2: var userChoice = window.confirm("Click OK
Windows窗口关系
weixin_42019823的博客
06-11 643
在windows系统中，每个窗口对象都对应有一个数据结构，形成一个list链表。系统的窗口管理器通过这个list来获取窗口信息和管理每个窗口。这个数据结构中有四个数据用来构建list，即child（儿子）、sibling（兄弟）、parent（父母）、owner（本人）四个域。所以我们可以看到，窗口之间的关系有两种：owner-owned 关系和 parent-child关系。前者称之为拥有/被拥...
窗口框架的使用
萌萌程序员的博客
01-24 919
1：框架的含义与组成 所有的框架标签都要放在一个HTML文档中，HTML页面的标签被框架集标签所取代 基本语法 窗口框架技术的应用 注意:路径可以是绝对路径或者相对路径 分割属性分为三种 1：左右分割窗口 2：上下分割窗口 3：嵌套分割窗口 ================ 2：框架集标签 常用属性 border  设置边框粗细，默认
父窗口概念
xiunai78的专栏
01-05 1671
问：在单文档中,为什么说frame是view的父窗口?又不是从frame继承来的?答：这里的父窗口只是说view覆盖在frame上面的，区别于父类的理解答：创建的时候通过参数指定的！指定哪个窗口为父窗口哪个窗口就是当前的父窗口了       指定父窗口主要是建立这两个窗口之间的关系，例如：           子窗口一定是在父窗口的前面的。           其它样式：             
父窗口和父类的一些理解
thinkZHU-的博客
09-29 1862
QWidget类是所有用户界面对象的基类，包括QMainWindow，QDialog等。 窗口部件是用户界面的一个基本单元：它从窗口系统接收鼠标、键盘和其它事件，并且在屏幕上绘制自己。每一个窗口部件都是矩形的，并且它们按Z轴顺序排列。一个窗口部件可以被它的父窗口部件或者它前面的窗口部件盖住一部分。 QMainWindow 类提供一个有菜单条、锚接窗口（例如工具条）和一个状态条的主应用程序窗口。主窗口
【无标题】
m0_61625918的博客
06-29 797
浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。 浏览器对象模型（Browser Object Model (BOM)）Window对象： 是BOM中所有对象的核心，同时也是BOM中所有对象的父对象。 定义在全局作用域中的变量、函数以及JavaScript中的内置函数都可以被Window对象调用。所谓窗口关系及框架指的就是通过 标签来引入的页面与当前页面的关系。指向最外层的框架 指向当前的父框架 指向自己 实现效果： 无论 如何嵌套，我们都可以
面试官：BOM对象有哪些？你用过哪些？
发果叁
10-13 1076
利用search我们就可以不用分割url便获得了url的查询字段，再借助字符串分割，我们就能很方便的获取url参数了。
前端浏览器窗口交互完全指南：从基础操作到高级控制
最新发布
Yue
04-27 630
状态同步网络- 通过BroadcastChannel+ServiceWorker实现全局状态机安全隔离沙箱- 基于Origin Policy和COOP/COEP的强安全模型自适应布局系统- 响应式设计+多屏幕感知+AI预测的综合方案性能优化体系- 资源预加载+WASM加速+智能缓存策略优先使用Permission Policy控制功能访问采用渐进增强策略兼容不同设备使用Worklets实现高性能动画交互通过Web Packaging实现离线窗口化应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值