javascript中的窗口

最新推荐文章于 2022-12-08 18:05:56 发布

出于蓝

最新推荐文章于 2022-12-08 18:05:56 发布

阅读量141

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/orq18810575870/article/details/79809588

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

窗口关系及框架

如果页面中包含框架,每个狂阶都拥有自己的window对象,且保存在frames集合中.在frames集合中,可以通过数值下标或者框架名称来访问window对象.举个例子:

<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="160,*">
    <frame src="frame.htm" name="topFrame">
    <frameset cols="50%,50%">
        <frame src="anotherframe.htm" name="leftFrame">
        <frame src="yetanotherframe.htm" name="rightFrame">
    </frameset>
</frameset>
</html>

上面有三个框架,有一个在上面,两个在下面,其中160,50% ,50%,定义了框架的大小

框架中也可以包含框架,只要在框架中引用的html文件中包含框架即可.

窗口位置:

IE、Safari、Opera 和Chrome 都提供了screenLeft 和screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在screenX 和screenY 属性中提供相同的窗口位置信息，Safari 和Chrome 也同时支持这两个属性.为了兼容浏览器,我们可以这样写:

var leftPos = (typeof window.screenLeft == "number") ?
window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
window.screenTop : window.screenY;

窗口大小:

IE9+、Firefox、Safari、Opera 和Chrome 提供了4 个属性：innerWidth、innerHeight、outerWidth 和outerHeight。innerWidth 和innerHeight则表示该容器中页面视图区的大小（减去边框宽度）。在Chrome 中，outerWidth、outerHeight 与innerWidth、innerHeight 返回相同的值，即视口（viewport）大小而非浏览器窗口大小。在IE6 中，这些属性必须在标准模式下才有效；如果是混杂模式，就必须通过document.body.clientWidth 和document.body.clientHeight 取得相同信息。而对于混杂模式下的Chrome，则无论通过document.documentElement还是document.body 中的clientWidth 和clientHeight 属性，都可以取得视口的大小。考虑到兼容,可以这样取得窗口的大小

var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
    if (document.compatMode == "CSS1Compat"){
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
} else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

出于蓝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript中的窗口

窗口关系及框架如果页面中包含框架,每个狂阶都拥有自己的window对象,且保存在frames集合中.在frames集合中,可以通过数值下标或者框架名称来访问window对象.举个例子: &lt;html&gt;&lt;head&gt;&lt;title&gt;Frameset Example&lt;/title&gt;&lt;/head&gt;&lt;frameset row...
复制链接

扫一扫