关于慕课向页面添加元素没反应的求助

bigonion

关于慕课向页面添加元素没反应的求助

在写慕课脚本的时候，发现一件奇怪的事情，以下是一个demo

// ==UserScript==
// @name        DEMO
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.icourse163.org/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=icourse163.org
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';
    var divE = document.createElement('div');
    var divId = document.createAttribute("id"); //创建属性
    divId.value = 'bigBox'; //设置属性值
    divE.setAttributeNode(divId); //给div添加属性
    divE.innerHTML =`<div id="findMe">我在这里</div>`
    document.body.append(divE)
   GM_addStyle(`
    #bigBox{
    position:absolute;
    top:100px;
    left:300px;
    width:300px;
    background:white;
    border:solid;
    font-size:40px
    }
    `)
    // Your code here...
})();

就干了一件事情，把盒子给加到body去，但是！
显示不出来，完完全全没有加进去，整个元素都搜不到

但是更加诡异的事情就是，如果我把下面的另一个脚本给他加进去，又可以正常append元素进去了！
补充脚本:

// ==UserScript==
// @name         补充
// @version      0.1
// @description  232
// @author       Onion
// @match        https://www.icourse163.org/*
// @require      https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js
// ==/UserScript==

你没看错，就加了一个jQuery进去，但是必须是另一个独立的脚本加入，demo脚本加入就不行！
加了以后就可以看到了

想问一下大佬们这是一个什么情况咧？

steven026

沙盒环境下的document可能指向的不是网页的document
解决方法是强制将document指向网页的document
脚本头需要额外声明一个权限

1. // @grant        unsafeWindow

复制代码

你可以尝试下在脚本开头加一行

1. const document=unsafeWindow.document;

复制代码

导致这个问题的具体原理可以参考
[油猴脚本开发指南]油猴的本质以及document的处理(一)
https://bbs.tampermonkey.net.cn/thread-2494-1-1.html
(出处: 油猴中文网)

cxxjackie

我测试了没有问题，看你的描述像是有其他代码重写了append方法，可能替换成了jquery的append，建议输出Element.prototype.append看看。添加元素我更习惯用appendChild，append的兼容性稍差，一些代码可能会尝试对其做polyfill，从而导致一些预期之外的结果。

bigonion

steven026 发表于 2022-12-22 20:24
沙盒环境下的document可能指向的不是网页的document
解决方法是强制将document指向网页的document
脚本头需 ...

GG太牛啦！确实是这个原因导致的！

bigonion

cxxjackie 发表于 2022-12-22 21:07
我测试了没有问题，看你的描述像是有其他代码重写了append方法，可能替换成了jquery的append，建议输出Elem ...

appendChild也是不行的，这里是document指向的原因！