syhyz1990 / mactype

油猴脚本 - 增强浏览器网页文字清晰度
https://www.youxiaohou.com/tool/install-mactype.html
157 stars 17 forks source link

DOM没有ready #23

Open Nifury opened 2 years ago

Nifury commented 2 years ago

有些时候脚本执行的时候DOM还没有完全加载,就会出现

Uncaught (in promise) TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at Object.addPluginStyle (159:26)
    at Object.init (171:18)

把main.init放到DOMContentLoaded里似乎可以解决。

syhyz1990 commented 2 years ago

放到 DOMContentLoaded 需要等到 DOM加载完成才加载样式,脚本需要尽可能早的加载,否则会出现样式延迟。所有用观察监听。。。

Nifury commented 2 years ago

是,但是现在document.head返回的不是node,监听就加不上,样式就不会生效呀。 就是说如果if (document.head)没过的话,headObserver.observe(document.head)也会失败。

直觉上可能要监听document,然后看add进来的是不是head。

Nifury commented 2 years ago

这样似乎能解决问题。

--- a/mactype.user.js
+++ b/mactype.user.js
@@ -32,15 +32,17 @@
             GM_setValue(name, value);
         },

-        addStyle(id, tag, css) {
+        addStyle(id, tag, css, node) {
             tag = tag || 'style';
             let doc = document, styleDom = doc.getElementById(id);
             if (styleDom) return;
+            node = node || document.head;
+
             let style = doc.createElement(tag);
             style.rel = 'stylesheet';
             style.id = id;
             tag === 'style' ? style.innerHTML = css : style.href = css;
-            document.head.appendChild(style);
+            node.appendChild(style);
         },

         removeElementById(eleId) {
@@ -149,12 +151,20 @@
             if (document.head) {
                 util.addStyle('swal-pub-style', 'style', GM_getResourceText('swalStyle'));
                 util.addStyle('mactype-style', 'style', style);
+            } else {
+                const headObserver = new MutationObserver((mutationList, observer) => {
+                    for (const mutations of mutationList) {
+                        for (const node of mutations.addedNodes) {
+                            if (node.tagName === 'HEAD') {
+                                util.addStyle('swal-pub-style', 'style', GM_getResourceText('swalStyle'), node);
+                                util.addStyle('mactype-style', 'style', style, node);
+                                observer.disconnect();
+                            }
+                        }
+                    }
+                });
+                headObserver.observe(document, {childList: true, subtree: true});
             }
-            const headObserver = new MutationObserver(() => {
-                util.addStyle('swal-pub-style', 'style', GM_getResourceText('swalStyle'));
-                util.addStyle('mactype-style', 'style', style);
-            });
-            headObserver.observe(document.head, {childList: true, subtree: true});
         },

         isTopWindow() {
cjjdaq commented 2 years ago

此问题经常性遇到,特别是豆瓣。