javascript - 我的页面上的代码阻止页面上的代码运行

Question

我正在尝试获取一个脚本，用不同的文本和链接替换页面上的文本。如果没有代码，页面可以正常工作，我可以执行诸如添加到购物车、查找产品编号(由鼠标悬停命令驱动)等操作。代码可以正常工作，它用链接替换文本，但是当我插入代码时，页面不再运行用户输入后的任何代码(即查找产品编号)。

知道为什么这会破坏我的页面吗？

window.addEventListener ? 
window.addEventListener("load",Name,false) : 
window.attachEvent && window.attachEvent("onload",Name);
function Name(){
     if (document.getElementsByTagName('body')[0].innerText.indexOf("Text") > 
-1) {
      var Var1 = document.getElementsByTagName('body')[0].innerHTML;
    var Var2 = Var1.replace(/Text/gi,"<a href = 
\"https://www.example.com\">NewText;</a>"); 
    document.getElementsByTagName('body')[0].innerHTML = Var2;

}

}

我最初使用的是 document.onload，我尝试过 window.onload 和其他几个事件处理程序，所有这些也都破坏了页面。我读到附加 onload 是执行此操作的正确方法，并将其合并到您在此处看到的代码中，但我采取的这些步骤都没有解决问题。

Answer 1

所以事实证明，替换正文的innerHTML会阻止我的页面(出于未知原因......这是一个squarespace网站)在加载后运行任何代码。因此，上面的代码可以工作(尽管存在一些语法问题)，但破坏了页面。

我通过按类定位页面上更具体的元素来修复此问题，这需要一些猜测并检查以找到包含我的元素的正确元素(同样，很难破译方形空间)，但现在一切正常。

工作代码:

window.addEventListener ? 
window.addEventListener("load",FuncName,false) : 
window.attachEvent && window.attachEvent("onload",FuncName);
function FuncName(){
    if (document.getElementsByTagName('body')[0].innerHTML.indexOf("word") > -1) 
{
      var Var1 = document.getElementsByClassName('ClassName');    
       for (var i = 0; i < Var1.length; i++){
    var Var2 = document.getElementsByClassName('ClassName')[i].innerHTML;
    var Var3 = Var2.replace(/word/gi,"<a href = 
\"http://www.example.com\">NewWord</a>"); 
    document.getElementsByClassName('ClassName')[i].innerHTML = 
Var3;

我必须添加一个循环来覆盖我在不同类中查找的单词的多个实例，但是就这样了。希望这可以帮助遇到类似问题的人。