DOM算法系列005-获取给定节点所属的window对象


UID: 20221220091217
aliases:
tags:
source:
cssclass:
created: 2022-12-20


我们知道,在一个HTML页面中,可以包含很多个框架或框架集,那么,当给定一个节点,我们如何获取这个节点所属的window对象呢?

首先,我们看看MDN上对window对象的讲解:

在这里,MDN直接告诉了我们,要获取window 对象,可以使用通过document 对象上的defaultView 来获取。

也就是说,我们的代码可能是这样的:

function getWindow(node) {
	var doc = getDocument(node); // 这个方法目前不存在,只是示例
	return doc.defaultView;
}

但是,当我们在查看MDN上关于 defaultView 的解释时,却看到了这样一句话:

尽管现在大多数人都使用chrome相同内核的浏览器了,IE已经被扫入历史的簸箕中了,但是国内一些政企由于历史原因,仍旧使用着IE8,那我们就不得不考虑兼容问题。

然后我们在 Dottoro 的web开发者文档里,寻找关于window 的线索(这个文档比MDN好的一点是它包含了很多IE早期版本的API说明)

很幸运被我们找到了,而且不止一个其他对象的属性指向window,而且有一个刚好也是在document 对象上。
其浏览器兼容性:

由此,兼容代码如下:

function getWindow(node) {
	var doc = getDocument(node); // 这个方法目前不存在,只是示例
	return doc.defaultView || doc.parentWindow;
}

现在唯一剩余的问题就是,如何根据node 获取到它所属的 document 对象。
同样,为了优先兼容IE,我们先看Dottoro开发者文档上document的关联对象:

这里,几乎所有标签和所有类型的节点都支持ownerDocument 这个属性,这个属性就直接指向节点或标签所在的文档对象。

再在MDN上验证一下

可以看到,这个属性是挂在顶层Node对象上,也就是所有节点上都会有这个属性,搞定:

function getWindow(node) {
	var doc = node.ownerDocument || node;// 传入node如果就是document时
	return doc.defaultView || doc.parentWindow;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值