maoting
- 浏览: 47203 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
窗口关系以及框架
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，也可以打开一个新的浏览器窗口。
这个方法接受四个参数：
- 要加载的URL、
- 窗口目标、
- 一个特定字符串
- 一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔。
参数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");
}
分享到：
发表评论
-
es6
2016-07-25 17:11 01.export default 不用关系模块输出了什么 ... -
immutable
2016-07-21 17:23 0作者：张克军链接：ht ... -
react
2016-07-08 16:02 0中文文档：http://reactjs.cn/react/ ... -
redux
2016-07-07 15:30 0redux例子counter总结： action：描述发 ... -
angular遇到的问题
2016-03-17 18:53 0Form Validation and fields add ... -
http2
2015-12-22 13:10 0http2资料： http://http2-explai ... -
iconfont的蜕化操作
2015-11-09 16:27 0转自：http://www.cnblogs. ... -
flux
2015-10-19 14:03 0转自：http://www.csdn.net/articl ... -
setTransform
2015-10-15 17:30 0转自：http://book.51cto.co ... -
遇到的问题
2014-12-19 14:37 0http://stackoverflow.com/questi ... -
node安装（windows）
2014-09-14 10:43 0Windows平台下的node.js安装 直接去node ... -
jQuery.Callbacks之demo
2014-08-30 10:56 0jQuery.Callbacks是jquery在1.7版本 ... -
使用proxy改变js上下文
2014-03-27 21:48 0<body> <div id=& ... -
num
2014-01-14 17:31 0$("input[type=text][imemo ... -
js插件模板
2014-01-05 12:36 0(function(){ function Guid ... -
jquery中的this
2013-06-26 21:42 0jQuery.fn.test2= function() ... -
SeaJS与RequireJS最大的区别
2013-06-21 08:43 0SeaJS与RequireJS最大的区别 转自：h ... -
快速排序
2013-06-16 17:35 0快速排序： 设要排序的数组是A[0]……A[N-1]，首先 ... -
autocomplete/suggest
2013-06-07 15:05 0<!DOCTYPE html PUBLIC & ... -
typeof
2013-06-06 08:35 0console.log(typeof ([])) //obj ...
相关推荐
在计算机编程领域，尤其是图形用户界面（GUI）的设计中，窗口、视图和框架体系是构建应用程序的基础元素。本文将深入探讨这些概念及其相互关系，为开发者提供宝贵的参考资料。 首先，我们来理解“窗口”（Window）...
本文将深入探讨标题所提及的应用程序与框架窗口的关系，以及如何使用CWinApp和CFrameWnd类进行操作。 首先，CWinApp是MFC中的一个关键类，它是每个MFC应用程序的核心，负责初始化、运行和结束应用程序。CWinApp继承...
在探讨“窗口类、窗口类对象与窗口三者之间的关系”这一主题时，我们首先要理解在Windows编程（尤其是使用Microsoft Foundation Class Library，简称MFC）的背景下，这三者各自的角色以及它们之间的交互机制。...
在"窗口绑架(多文档方式)"中，通常是指MDI（Multiple Document Interface）应用程序，这种情况下，窗口都是在一个主框架窗口内部，通过`SetParent`可以使子窗口在MDI框架内自由移动。MDI应用允许同时打开多个文档，...
本篇文章将深入探讨多层框架窗口的概念、其重要性以及如何在VC环境下实现。 首先，我们要理解什么是“框架窗口”。框架窗口是Windows应用程序中的一个基本组件，它作为一个容器，可以包含其他控件或子窗口。在MFC...
MFC 子窗口和父窗口关系详解 在 Windows 系统中，每个窗口对象都对应有一个数据结构，形成一个 list 链表。系统的窗口管理器通过这个 list 来获取窗口信息和管理每个窗口。这个数据结构中有四个数据用来构建 list，...
综上所述，MFC框架窗口界面设计涉及了类的继承关系、项目文件的组织结构以及窗口管理等多个方面，理解这些概念对于高效开发Windows应用程序至关重要。通过合理利用MFC提供的类库，开发者能够快速构建出功能完善且...
框架集与框架之间的关系就是包含与被包含的关系。 框架和框架集的属性设置是非常重要的，通过设置框架和框架集的属性，可以实现网页的布局和设计。Dreamweaver 8 提供了预定义框架集的功能，可以快速创建框架集，也...
在本文档中，我们将通过一个财务管理软件的例子来详细介绍PowerBuilder (PB) 应用程序的总体框架设计，重点讲解MDI (Multiple Document Interface) 窗口程序的构建方法，并探讨如何构建基本的父类窗口以及通用控件，...
MFC框架窗口界面设计是其中的核心内容，涉及到多个类的使用和它们之间的关系。 首先，我们来看一下MFC框架窗口的基本组成。在MFC中，文档应用程序主要由以下几个类构成： 1. **应用程序类**：通常从`CWinApp`派生...
通过阅读“在MFC类中各种类的指针的获取和应用.pdf”、“文档、视图、框架窗口、文档模板之间的相互关系.pdf”和“VC多文档程序结构.pdf”这些资料，开发者可以更详细地了解如何在实践中利用这些概念来构建自己的...
在Windows应用程序开发中，框架窗口界面...总的来说，MFC框架窗口界面设计涉及类的继承关系、项目组织结构、窗口状态管理和风格设定等多个方面，理解和掌握这些知识对于开发高效、用户友好的Windows应用程序至关重要。
在探讨文档类、视图类以及它们与框架之间的关系时，我们需要深入理解MFC（Microsoft Foundation Classes）中的几个关键概念及其相互作用机制。以下是对这些概念及其关系的详细解析： #### 1. **文档类与视图类的...
本实验通过建立框架页面，掌握 Dreamweaver 的基础知识、框架的基本分布结构和框架页面之间的相互联系、框架属性的设置、框架编辑窗口和框架面板的操作、属性面板的操作、表格的设计和开发、框架页面的制作和设计等...
本篇将详细解释这两个概念以及它们之间的关系。 首先，窗口是我们所说的图形用户界面（GUI）中的一个重要组成部分。在操作系统中，窗口是一种可以移动、调整大小并显示应用程序内容的矩形区域。用户可以通过窗口...
总结起来，MFC框架窗口界面设计涉及到文档/视图架构、窗口类的继承关系、项目文件组织以及窗口状态管理等多个方面，是Windows平台上开发桌面应用的重要技术。通过熟练掌握这些知识，开发者能够高效构建具有专业界面...
在QML中，你可以构建可拉伸、可拖拽为独立窗口的UI框架，这使得应用程序的界面设计更加灵活和动态。QML结合了声明式语言的简洁性和JavaScript的编程能力，使开发者能够快速创建出美观且响应式的用户界面。 1. **...
"QT父子窗口相互传值"这个主题，主要涉及Qt框架中如何有效地实现这种通信机制。本篇文章将详细探讨Qt窗口之间传递数据的方法和技巧，对初学者来说尤其具有指导意义。 首先，让我们理解Qt中的窗口对象关系。在Qt中，...