Compatible with native js tool classes commonly used by various browsers: obtaining browser scroll bar width and height, events, partial printing, etc.
1. Obtain the width and height of the visible domain of the browser (excluding scroll bars and scrolling)
ieE<=8 does not support innerWidth and innerHeight attributes. ie6 supports
document.documentElement.clientHeight. Other IE versions use document.body.clientHeight.
export function getWinHeight() {
var windowHeight;
if (window.innerHeight) {
// 除了IE 8 以外的浏览器
windowHeight = window.innerHeight
} else if (document.documentElement && document.documentElement.clientHeight) {
/* IE6 浏览器 */
windowHeight = document.documentElement.clientHeight
} else if (document.body) {
//其他版本的IE浏览器
windowHeight = document.body.clientHeight
}
return windowHeight;
}
export function getWinWidth() {
var windowWidth;
if (window.innerWidth) {
// 除了IE以外的浏览器
windowWidth = window.innerWidth
} else if (document.documentElement && document.documentElement.clientWidth) {
/* IE6 浏览器 */
windowWidth = document.documentElement.clientWidth
} else if (document.body) {
//其他版本的IE浏览器
windowWidth = document.body.clientWidth
}
return windowWidth;
}
clientHeight/Width refers to the following:
2. Adding and removing events
ieE<=8 does not support document.addEventListener event addition and document.removeEventListener event removal
export const on = (function() {
if (document.addEventListener) {
return function(element, event, handler) {
if (element && event && handler) {
element.
(event, handler, false);
}
};
} else {
return function(element, event, handler) {
if (element && event && handler) {
element.attachEvent('on' + event, handler);
}
};
}
})();
export const off = (function() {
if (document.removeEventListener) {
return function(element, event, handler) {
if (element && event) {
element.removeEventListener(event, handler, false);
}
};
} else {
return function(element, event, handler) {
if (element && event) {
element.detachEvent('on' + event, handler);
}
};
}
})();
3. Get the scroll bar width
IE does not support the setting and acquisition of browser scroll bars. The method of obtaining scroll bars in elementUI2.13.2 version is as follows:
export scrollbarWidth function() {
const outer = document.createElement('div');
outer.className = 'el-scrollbar__wrap';
outer.style.visibility = 'hidden';
outer.style.width = '100px';
outer.style.position = 'absolute';
outer.style.top = '-9999px';
document.body.appendChild(outer);
const widthNoScroll = outer.offsetWidth;
outer.style.overflow = 'scroll';
const inner = document.createElement('div');
inner.style.width = '100%';
outer.appendChild(inner);
const widthWithScroll = inner.offsetWidth;
outer.parentNode.removeChild(outer);
scrollBarWidth = widthNoScroll - widthWithScroll;
return scrollBarWidth;
};
4. Implement local printing function
/**
* @param {DOM} dom 对象
* @return {Null} null 实现局部打印功能
*/
export const printDom = (dom) => {
let print = document.getElementById("print_dom_version1")
if (!print) {
let dom = document.createElement("div")
dom.id = "print_dom_version1"
document.body.appendChild(dom)
print = dom
}
print.style.display = ''
print.innerHTML = dom.innerHTML
let bodyCh = document.body.children
let dis = bodyCh[0].style.display
bodyCh[0].style.display = 'none'
window.print()
print.style.display = 'none'
bodyCh[0].style.display = dis
}