Question

我管理一个托管软件的论坛，所以我无法访问源代码，我只能在页面中添加JavaScript来实现我所需要的。

我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些链接进行了地理定位。

我设法通过阅读本网站上的其他答案拼凑下面的代码，它实际上工作并完全按照我的意愿去做，但它似乎搞乱了其他JavaScript（还是jQuery？）之前已经加载到页面上。

任何人都可以看到此代码有什么问题会导致其影响其他JavaScript代码吗？

var c = null;
$.get("https://pro.ip-api.com/json/?key=XXXXXXXXXX", function(data) {
  c = data.countryCode;
  if (c == "GB") {
    var thePage = $(".MessageList");
    thePage.html(thePage.html().replace('KEYWORD1 ', '<a href="http://www.exampleGBlink1.com">KEYWORD1</a> '));
    thePage.html(thePage.html().replace('KEYWORD2 ', '<a href="http://www.exampleGBlink2.com">KEYWORD2</a> '));
  } else {
    var thePage = $(".MessageList");
    thePage.html(thePage.html().replace('KEYWORD1 ', '<a href="http://www.exampleELSElink1.com">KEYWORD1</a> '));
    thePage.html(thePage.html().replace('KEYWORD2 ', '<a href="http://www.exampleELSElink2.com">KEYWORD2</a> '));
  }
  console.log(data.countryCode);
}, "jsonp");

我对此代码的另一个问题是：它还替换了我的HTML代码中的关键字实例，因此我在关键字的末尾添加了额外的空白区域作为黑客攻击。

修改

如果我在上面的代码下面添加下面的代码，那么一切正常，我的问题就消失了，是什么给出的？此文件不存在，我收到控制台错误：“无法加载资源：net :: ERR_INSECURE_RESPONSE”

<script src="https://www.RandomDomain.com/test.js"></script>

Answer 1

尝试将JavaScript包装在一个立即调用的函数表达式（IIFE）中。这将避免您使用的变量在全局命名空间中注册。您的页面上加载的缩小脚本很可能会使用c之类的变量名称。

IIFE：

(function () {
  // Your JavaScript here.
})();

Answer 2

我看到的一个问题是您使用的方法来替换页面内容。当您使用＆＃34; x.html（）＆＃34;将html元素提取为字符串时，最终会以字符串形式显示html元素，但不包括所有附加的事件处理程序。然后，当您通过调用Page.html（updatedHtmString）更新html元素时，html元素将按预期还原，但所有附加的事件处理程序现在都将丢失。这很容易导致许多js ui框架大量使用事件处理程序。

就个人而言，我会使用jquery选择器遍历DOM树，找到具有这些关键字的html文本内容的元素，并用新插入的元素替换该关键字。

而不是替换整个＆＃34; .MessageList＆＃34; DOM树，您只需更改元素中的文本并添加新元素。没有附加事件会丢失。

我在下面添加了一个示例FIDDLE和函数。在小提琴中，您可以看到如何使用.html删除事件处理程序。在下面的函数中，我将其调整为仅通过添加＆＃39;来更改第一个匹配项：first＆＃39; jquery选择器。

JSFiddle Demo

// Ugly but functional function to do the replacement.
function GoodReplaceOnlyFirstOccurence(findText, replaceWith) {

    var $targElem = $(".MessageList1");

    $targElem.children().each(function() {
        var $elem = $(this);
        $( ":contains('"+findText+"'):first", $elem ).html(function () {
          return $(this).html().replace(findText, replaceWith); 
        });
    });
}

JavaScript代码片段打破了其他JavaScript

2 个答案: