代码之家  ›  专栏  ›  技术社区  ›  Adelost

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

  •  1
  • Adelost  · 技术社区  · 12 年前

    问题

    在chrome扩展中运行这行javascript,youtube上的所有视频都拒绝播放(有时有声音,但没有图像)。

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

    出身背景

    我正在尝试创建一个突出显示某些单词的chrome扩展,为此,我分析HTML并插入 <span style = '...' > -标签放置在适当的位置。

    我通过阅读和设置来修改网页 document.body.innerHTML 在javascript中。这种方法似乎适用于大多数网站,但如果我尝试设置 innerHTML 无论如何,YouTube上的视频都拒绝播放。

    实例

    一个最小的工作示例,如果添加为扩展,则YouTube上的所有视频都无法播放 here .

    编辑:删除了问题之外的其他信息。

    1 回复  |  直到 12 年前
        1
  •  3
  •   Patrick Evans    12 年前

    通过做

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

    你们正在重建身体中的每一个元素。这会中断附加到原始元素的任何事件侦听器,因为这些对象不再存在(新对象确实存在,即克隆)。

    不要使用 innerHTML 插入dom元素将:

    1. 使事件像你已经学会的那样破裂
    2. 将导致所有其他元素的重新渲染,这是不需要发生的,如果这样做,通常会导致性能问题。

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