添加 href 和 id 属性会导致框架错误

Question

获取图像列表后，我想将它们显示在网格上；修补帧后它可以工作，但它不断吐出以下错误：

TypeError: win[(("HTML" + (intermediate value)) + "Element")] is undefined

相关代码：

const grid = document.querySelector('#img-grid')
var results = [
    {score: 7, favs: 4, id: 1234, preview: 'example.com/image.png'}
    // etc...
]
function showPosts() {
    grid.replaceChildren()
    results.map((post, i) => {
        const article = document.createElement('article')
        const a       = document.createElement('a')
        const div     = document.createElement('div')
        const img     = document.createElement('img')
        
        article.classList.add(['img-res'])
        // `viewing-page` is just a div that holds a bigger image
        a.href = '#viewing-page' //! This line leads to the error
        a.onclick = view
        a.id = i
        img.src = post['preview']
        div.innerText = getSortVal(post) // `getSortVal` return either `.score`, `.favs`, or `.id`, based on a `select` sorting option
        
        a.appendChild(img)
        article.appendChild(a)
        article.appendChild(div)
        grid.appendChild(article) // Traceback points to this line on my code
    })
}

href

只是让页面从图库向下滚动到查看页面。

在 NoScript 库上，它尝试从

HTMLFrameElement

锚点访问

a

属性：

// NoScript Commons Library (patchWindow.js)
function modifyFramingElements(win) { // win is the `a` element when the error occurs
    for (let property of ["contentWindow", "contentDocument"]) {
      for (let iface of ["Frame", "IFrame", "Object"]) {
        let proto = win[`HTML${iface}Element`].prototype; // throws here
        modifyContentProperties(proto, property)
      }
    }
    // ...

我发现

win

参数将是分配给

id

i

的任何内容。因此，如果我改为

img.id = i

，那么

win

将是

img

元素。

HTMLFrameElement

接口已被弃用，所以我什至不知道为什么它仍在尝试访问它。

删除

href

分配后，它不再给出错误，这很奇怪，因为它只是向下滚动到查看页面区域的一种方式。

更改附加顺序并没有停止错误。

这是完整的错误消息：

TypeError: win[(("HTML" + (intermediate value)) + "Element")] is undefined
    modifyFramingElements moz-extension://d5a0cd25-8ab0-4971-bfe9-992ee8de967f/nscl/content/patchWindow.js:291
    modifyWindow moz-extension://d5a0cd25-8ab0-4971-bfe9-992ee8de967f/nscl/content/patchWindow.js:268
    patchAll moz-extension://d5a0cd25-8ab0-4971-bfe9-992ee8de967f/nscl/content/patchWindow.js:304
    apply moz-extension://d5a0cd25-8ab0-4971-bfe9-992ee8de967f/nscl/content/patchWindow.js:321
    showPosts http://localhost:8080/script.js:65
    showPosts http://localhost:8080/script.js:49
    search http://localhost:8080/script.js:30
    onclick http://localhost:8080/#viewing-page:1
 Patching frames[0] patchWindow.js:306:19
    patchAll moz-extension://d5a0cd25-8ab0-4971-bfe9-992ee8de967f/nscl/content/patchWindow.js:306
    apply moz-extension://d5a0cd25-8ab0-4971-bfe9-992ee8de967f/nscl/content/patchWindow.js:321
    showPosts http://localhost:8080/script.js:65
    showPosts http://localhost:8080/script.js:49
    search http://localhost:8080/script.js:30

Answer 1

基本上，NoScript 扩展仍在使用前面提到的

HTMLFrameElement

接口，该接口已被弃用，导致它在无法读取其属性时抛出异常。

这仍然很奇怪，因为我为本地主机禁用了 NoScript，但这仍然是错误的根源。

我在他们的论坛上发了一个帖子，通知他们这个错误。