javascript - 修改innerHTML使Youtube视频无法播放 - Chrome扩展

Question

问题

在 Chrome 扩展程序中运行这行 javacript，YouTube 上的所有视频都拒绝播放(有时有声音但没有图像)。

document.body.innerHTML = document.body.innerHTML;

背景

我正在尝试制作一个突出显示某些单词的 Chrome 扩展，为了做到这一点，我分析了 HTML 并插入 <span style = '...' > - 在适当的位置添加标签。

我通过读取和设置document.body.innerHTML来修改网页在 JavaScript 中。这种方法似乎适用于大多数网站，但是如果我尝试设置 innerHTML不管怎样，YouTube 上的视频都无法播放。

示例

可以下载一个最小的工作示例 here，如果将其作为扩展添加，则 YouTube 上的所有视频都无法播放.

编辑:删除了不属于问题的附加信息。

Answer 1

通过做

document.body.innerHTML = document.body.innerHTML;
//Or even
document.body.innerHTML += "<span>text</span>";

您正在重新创建体内的每个元素。这会破坏附加到原始元素的任何事件监听器，因为这些对象不再存在(新对象存在，即克隆)。

不要使用innerHTML插入dom元素，这样做会:

1. 像您已经学过的那样导致事件中断
2. 将导致所有其他元素重新渲染，这是不需要发生的，如果经常这样做会导致性能问题。

使用appendChild , insertBefore , removeChild以及其他 dom 函数来添加/删除元素。