JavaScript代碼片斷正在打破其他JavaScript

我管理一個託管軟件的論壇，因此我無法訪問源代碼，我只能將JavaScript添加到頁面以實現我需要完成的任務。JavaScript代碼片斷正在打破其他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代碼中的關鍵字的情況下，所以我在關鍵字作爲解決此一劈的末尾添加額外的空格。

編輯：

如果我添加的代碼下面的代碼下面上方，然後一切正常，我的問題都沒有了，怎麼辦？此文件不存在，我得到一個控制檯錯誤：「無法加載資源：淨:: ERR_INSECURE_RESPONSE」

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

來源

2017-04-21 BudV

什麼是造成你的JS問題？您的控制檯是否向您發送任何錯誤消息？ – Lixus

我沒有得到任何控制檯錯誤，但該網站的其他功能都不能正常工作 – BudV

嘗試在一個立即調用的函數表達式（IIFE）包裹你的JavaScript。這將避免您使用在全局名稱空間上註冊的變量。很可能像c這樣的變量名將被加載到頁面上的縮小腳本使用。

IIFE：

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

來源

2017-04-21 15:42:08 anierzad

謝謝您的回覆，這似乎並沒有解決我的問題，但它是大加讚賞 – BudV

一個問題，我看到的是與你正在使用替換頁面內容的方法。當您使用「x.html（）」將html元素作爲字符串提取出來時，最終會以字符串形式顯示html元素，但不包括所有附加的事件處理程序。當您通過調用Page.html（updatedHtmString）更新html元素時，html元素按預期恢復，但所有附加的事件處理程序現在都已丟失。這很容易導致許多js UI框架大量使用事件處理程序。

就我個人而言，我將使用jQuery選擇器遍歷DOM樹，使用這些關鍵字查找具有html文本內容的元素，並用新插入的元素替換關鍵字。

除了替換整個「.MessageList」DOM樹，您只需更改元素中的文本並添加新元素即可。沒有附加事件將會丟失。

我已經在下面添加了一個示例FIDDLE和函數。在小提琴中，您可以看到如何使用.html去除事件處理程序。在下面的函數中，我將其調整爲僅通過添加'：first'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); 
     }); 
    }); 
}

來源

2017-04-21 16:51:37 andym1978

這看起來是一個可能的修復。堅持完整的HTML替換可能會更簡單，但要確保它在其他js附加事件處理程序之前完成。（當然假設關鍵字沒有被其他js放置*）。 –

謝謝你，這是非常有幫助的，我不知道該怎麼做的代碼來完成你的建議，你能指出我的好地方研究這個？ – BudV

流浪者，令人驚訝的完整的HTML更換隻能在網站上破一個很小的事情，所以我希望我能保持它的簡單 – BudV

JavaScript代碼片斷正在打破其他JavaScript

回答

相關問題