fix: 适配获取shadowDom中html的clientHeight#589
Open
Xusenbiao wants to merge 1 commit intoTencent:masterfrom
Open
Conversation
Collaborator
|
这个地方建议采用插件来解决这个问题,因为不同用户对clientHeight的需求不一致,有一些需求是希望那外面window的,有一些需求是希望拿shadowdom的视窗,这个地方可能就是一个使用wujie的心智负担,没有很好的办法来解决 |
|
我尝试在插件中改写 const plugins = [
{
documentPropertyOverride(iframWindow: Window) {
Object.defineProperty(
iframWindow.document.documentElement,
'clientHeight',
{
enumerable: true,
configurable: false,
get() {
return window.document.documentElement.clientHeight;
},
},
);
},
},
];子应用中没能拦截成功,且打印时访问不到 |
|
@NNNNzs 哥你解决没,我也想修改子应用的clientHeight |
import type { plugin } from "wujie";
/**
* 该插件拦截子应用的clientHeight和clientWidth属性,使子应用中取值的时候,拿到的是主应用的值
*/
export const rewriteChildclientHeightplugin: plugin = {
windowPropertyOverride: (iframWindow) => {
iframWindow.addEventListener('load', () => {
Object.defineProperty(iframWindow.document.documentElement, 'clientHeight', {
enumerable: true,
configurable: false,
get() {
return window.document.documentElement.clientHeight
}
})
Object.defineProperty(iframWindow.document.documentElement, 'clientWidth', {
enumerable: true,
configurable: false,
get() {
return window.document.documentElement.clientWidth
}
})
})
}
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
npm run test通过详细描述
通过
clientHeight获取元素高度有个特例:对于
html节点,会拿到窗口高度(viewport height):https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight但在
shadowDom中,子应用html的clientHeight拿到的是html节点高度。非降级模式下,子应用弹窗可以溢出到全局,但当子应用内的悬浮提示定位依赖这个属性时,就会导致定位不准确。
(我这边出问题的场景是,子应用的弹窗内,表单校验提示的悬浮气泡定位不准)
排查发现是气泡的定位代码依赖了
jQuery获取window高度的写法:jQuery对应的内部实现为:拿到了
html的高度从而导致气泡错位。此PR针对该场景,处理了
shadowDom内html的clientHeight属性,使其拿到外层html的clientHeight。对于嵌套场景,会继续传递,拿到最外层的
html的clientHeight。对于降级场景,因弹窗不会溢出到全局,故无需处理。