@whitesev/domutils 1.4.8 → 1.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.amd.js +62 -13
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +62 -13
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +62 -13
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +62 -13
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +62 -13
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +62 -13
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/DOMUtilsCommonUtils.d.ts +10 -0
- package/dist/types/src/types/DOMUtilsEvent.d.ts +1 -0
- package/package.json +1 -1
- package/src/DOMUtils.ts +31 -11
- package/src/DOMUtilsCommonUtils.ts +24 -0
- package/src/types/DOMUtilsEvent.d.ts +1 -0
package/dist/index.umd.js
CHANGED
|
@@ -61,6 +61,46 @@
|
|
|
61
61
|
isShow(element) {
|
|
62
62
|
return Boolean(element.getClientRects().length);
|
|
63
63
|
},
|
|
64
|
+
/**
|
|
65
|
+
* 获取安全的html
|
|
66
|
+
*/
|
|
67
|
+
getSafeHTML(text) {
|
|
68
|
+
// @ts-ignore
|
|
69
|
+
if (globalThis.trustedTypes) {
|
|
70
|
+
// @ts-ignore
|
|
71
|
+
const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
|
|
72
|
+
createHTML: (html) => html,
|
|
73
|
+
});
|
|
74
|
+
return policy.createHTML(text);
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
return text;
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
/**
|
|
81
|
+
* 在CSP策略下设置innerHTML
|
|
82
|
+
* @param $el 元素
|
|
83
|
+
* @param text 文本
|
|
84
|
+
*/
|
|
85
|
+
setSafeHTML($el, text) {
|
|
86
|
+
// 创建 TrustedHTML 策略(需 CSP 允许)
|
|
87
|
+
try {
|
|
88
|
+
$el.innerHTML = text;
|
|
89
|
+
}
|
|
90
|
+
catch (error) {
|
|
91
|
+
// @ts-ignore
|
|
92
|
+
if (globalThis.trustedTypes) {
|
|
93
|
+
// @ts-ignore
|
|
94
|
+
const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
|
|
95
|
+
createHTML: (html) => html,
|
|
96
|
+
});
|
|
97
|
+
$el.innerHTML = policy.createHTML(text);
|
|
98
|
+
}
|
|
99
|
+
else {
|
|
100
|
+
throw new Error("trustedTypes is not defined");
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
},
|
|
64
104
|
/**
|
|
65
105
|
* 用于显示元素并获取它的高度宽度等其它属性
|
|
66
106
|
* @param element
|
|
@@ -1039,7 +1079,7 @@
|
|
|
1039
1079
|
super(option);
|
|
1040
1080
|
}
|
|
1041
1081
|
/** 版本号 */
|
|
1042
|
-
version = "
|
|
1082
|
+
version = "2025.3.2";
|
|
1043
1083
|
attr(element, attrName, attrValue) {
|
|
1044
1084
|
let DOMUtilsContext = this;
|
|
1045
1085
|
if (typeof element === "string") {
|
|
@@ -1096,7 +1136,7 @@
|
|
|
1096
1136
|
let DOMUtilsContext = this;
|
|
1097
1137
|
let tempElement = DOMUtilsContext.windowApi.document.createElement(tagName);
|
|
1098
1138
|
if (typeof property === "string") {
|
|
1099
|
-
tempElement
|
|
1139
|
+
DOMUtilsContext.html(tempElement, property);
|
|
1100
1140
|
return tempElement;
|
|
1101
1141
|
}
|
|
1102
1142
|
if (property == null) {
|
|
@@ -1107,6 +1147,10 @@
|
|
|
1107
1147
|
}
|
|
1108
1148
|
Object.keys(property).forEach((key) => {
|
|
1109
1149
|
let value = property[key];
|
|
1150
|
+
if (key === "innerHTML") {
|
|
1151
|
+
DOMUtilsContext.html(tempElement, value);
|
|
1152
|
+
return;
|
|
1153
|
+
}
|
|
1110
1154
|
tempElement[key] = value;
|
|
1111
1155
|
});
|
|
1112
1156
|
Object.keys(attributes).forEach((key) => {
|
|
@@ -1275,7 +1319,7 @@
|
|
|
1275
1319
|
html = html.innerHTML;
|
|
1276
1320
|
}
|
|
1277
1321
|
if ("innerHTML" in element) {
|
|
1278
|
-
element
|
|
1322
|
+
DOMUtilsCommonUtils.setSafeHTML(element, html);
|
|
1279
1323
|
}
|
|
1280
1324
|
}
|
|
1281
1325
|
}
|
|
@@ -1381,7 +1425,12 @@
|
|
|
1381
1425
|
return Reflect.get(element, propName);
|
|
1382
1426
|
}
|
|
1383
1427
|
else {
|
|
1384
|
-
|
|
1428
|
+
if (element instanceof Element && propName === "innerHTML") {
|
|
1429
|
+
DOMUtilsContext.html(element, propValue);
|
|
1430
|
+
}
|
|
1431
|
+
else {
|
|
1432
|
+
Reflect.set(element, propName, propValue);
|
|
1433
|
+
}
|
|
1385
1434
|
}
|
|
1386
1435
|
}
|
|
1387
1436
|
/**
|
|
@@ -1597,7 +1646,7 @@
|
|
|
1597
1646
|
}
|
|
1598
1647
|
function elementAppendChild(ele, text) {
|
|
1599
1648
|
if (typeof content === "string") {
|
|
1600
|
-
ele.insertAdjacentHTML("beforeend", text);
|
|
1649
|
+
ele.insertAdjacentHTML("beforeend", DOMUtilsCommonUtils.getSafeHTML(text));
|
|
1601
1650
|
}
|
|
1602
1651
|
else {
|
|
1603
1652
|
ele.appendChild(text);
|
|
@@ -1643,7 +1692,7 @@
|
|
|
1643
1692
|
return;
|
|
1644
1693
|
}
|
|
1645
1694
|
if (typeof content === "string") {
|
|
1646
|
-
element.insertAdjacentHTML("afterbegin", content);
|
|
1695
|
+
element.insertAdjacentHTML("afterbegin", DOMUtilsCommonUtils.getSafeHTML(content));
|
|
1647
1696
|
}
|
|
1648
1697
|
else {
|
|
1649
1698
|
let $firstChild = element.firstChild;
|
|
@@ -1680,7 +1729,7 @@
|
|
|
1680
1729
|
return;
|
|
1681
1730
|
}
|
|
1682
1731
|
if (typeof content === "string") {
|
|
1683
|
-
element.insertAdjacentHTML("afterend", content);
|
|
1732
|
+
element.insertAdjacentHTML("afterend", DOMUtilsCommonUtils.getSafeHTML(content));
|
|
1684
1733
|
}
|
|
1685
1734
|
else {
|
|
1686
1735
|
let $parent = element.parentElement;
|
|
@@ -1719,7 +1768,7 @@
|
|
|
1719
1768
|
return;
|
|
1720
1769
|
}
|
|
1721
1770
|
if (typeof content === "string") {
|
|
1722
|
-
element.insertAdjacentHTML("beforebegin", content);
|
|
1771
|
+
element.insertAdjacentHTML("beforebegin", DOMUtilsCommonUtils.getSafeHTML(content));
|
|
1723
1772
|
}
|
|
1724
1773
|
else {
|
|
1725
1774
|
let $parent = element.parentElement;
|
|
@@ -1779,7 +1828,7 @@
|
|
|
1779
1828
|
});
|
|
1780
1829
|
return;
|
|
1781
1830
|
}
|
|
1782
|
-
element
|
|
1831
|
+
DOMUtilsContext.html(element, "");
|
|
1783
1832
|
}
|
|
1784
1833
|
/**
|
|
1785
1834
|
* 获取元素相对于文档的偏移坐标(加上文档的滚动条)
|
|
@@ -1989,10 +2038,10 @@
|
|
|
1989
2038
|
if (typeof duration !== "number" || duration <= 0) {
|
|
1990
2039
|
throw new TypeError("duration must be a positive number");
|
|
1991
2040
|
}
|
|
1992
|
-
if (typeof callback !== "function" && callback !==
|
|
2041
|
+
if (typeof callback !== "function" && callback !== undefined) {
|
|
1993
2042
|
throw new TypeError("callback must be a function or null");
|
|
1994
2043
|
}
|
|
1995
|
-
if (typeof styles !== "object" || styles ===
|
|
2044
|
+
if (typeof styles !== "object" || styles === undefined) {
|
|
1996
2045
|
throw new TypeError("styles must be an object");
|
|
1997
2046
|
}
|
|
1998
2047
|
if (Object.keys(styles).length === 0) {
|
|
@@ -2051,7 +2100,7 @@
|
|
|
2051
2100
|
element = element;
|
|
2052
2101
|
// 创建一个新的div元素,并将wrapperHTML作为其innerHTML
|
|
2053
2102
|
let wrapper = DOMUtilsContext.windowApi.document.createElement("div");
|
|
2054
|
-
wrapper
|
|
2103
|
+
DOMUtilsContext.html(wrapper, wrapperHTML);
|
|
2055
2104
|
let wrapperFirstChild = wrapper.firstChild;
|
|
2056
2105
|
// 将要包裹的元素插入目标元素前面
|
|
2057
2106
|
let parentElement = element.parentElement;
|
|
@@ -2147,7 +2196,7 @@
|
|
|
2147
2196
|
}
|
|
2148
2197
|
function parseHTMLByCreateDom() {
|
|
2149
2198
|
let tempDIV = DOMUtilsContext.windowApi.document.createElement("div");
|
|
2150
|
-
tempDIV
|
|
2199
|
+
DOMUtilsContext.html(tempDIV, html);
|
|
2151
2200
|
if (isComplete) {
|
|
2152
2201
|
return tempDIV;
|
|
2153
2202
|
}
|