BOM的窗口大小

最新推荐文章于 2024-11-23 16:43:07 发布

鱼在在

最新推荐文章于 2024-11-23 16:43:07 发布

阅读量418

点赞数 4

分类专栏： JavaScript 文章标签： css 前端 html vue.js javascript

本文链接：https://blog.csdn.net/weixin_72254790/article/details/140972547

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

所有现代浏览器都支持 4 个属性： innerWidth、innerHeight、outerWidth 和 outerHeight。

innerWidth和innerHeight：返回浏览器窗口中页面视口的大小

outerWidth 和 outerHeight ：返回浏览器窗口自身的大小

可以明显看出，前缀inner就是浏览器内部视口大小（不包含浏览器边框和工具栏），outer就是浏览器外部大小（不管是在最外层 window 上使用，还是在窗格中使用）

不包含滚动条的页面视口

值得注意的是页面视口的显示document.documentElement.clientWidth 和 document.documentElement.clientHeight 也返回页面视口的宽度和高度，不同的是前者返回的页面视口包括滚动条的宽度（如果存在的话），后缀则不包含。

兼容性

document.compatMode 属性用来指示文档是否处于“标准模式”（也称为“严格模式”）或“混杂模式”（也称为“怪异模式”或“Quirks Mode”）。这个属性的值可以是 "CSS1Compat" 或 "BackCompat"。

在标准模式下，document.documentElement 通常指的是 <html> 标签，它包含了整个文档的宽度和高度。
在混杂模式下，document.body 可能不包括整个文档的宽度和高度，特别是当文档中存在滚动条时。

为了不同浏览器模式下都能正确获取页面的宽度和高度，可以选择使用document.compatMode 判断是否为标准模式（一般现代浏览器都处于CSS1Compat），再使用document.documentElement.clientHeight。

实验

现在做一个小实现，内容是当页面窗口大小变化时候html页面实时显示，这里是使用的是Vue中的语法。

页面模板

<view class="content">
		<text>{{ w }}:{{h}}</text> <!-- 使用 currentTime 来显示时间 -->
		<button @click="startTimer">{{title}}</button>
</view>

js部分

这里使用setInterval每秒去获取窗口大小，使用方法也是老生常谈了【表达式，时间（毫秒）】

<script>
	export default {
		data() {
			return {
				title: "标题随窗口变化", // 提示信息
				w:0,
				h:0
			};
		},
		methods: {
			startTimer: function () {
				// 设置定时器每秒更新 currentTime
					this.intervalId = setInterval(() => {
                    //判断标准模式
					if (document.compatMode == "BackCompat"){
					this.w=document.documentElement.clientWidth;
					this.h=document.documentElement.clientHeight;
					}
					else{
					this.w= document.body.clientWidth;
					this.h= document.body.clientHeight;
					}

					}, 1000);
			},
			clearTimer: function () {
				// 清除定时器
				clearInterval(this.intervalId);
			}
		},
		onUnload() {
			// 页面卸载时清除定时器
			this.clearTimer();
		}
	}
</script>