javascript - 如何清除 Chrome 中 setAttribute ('onclick' 、 'window.open()' )的属性？

Question

我有一个 Chrome 扩展程序，可以在页面上创建一个 div。稍后，此 div 会更新以打开新选项卡:

var div = document.getElementById("MyReport");
div.setAttribute('onclick', "window.open('" + results.productUrl + "')");

该链接可以更新几次。每次更新时，之前的 onclick 操作都会保留。我似乎无法清除之前的onclick。我尝试过:

var div = document.getElementById("MyReport");
div.removeAttribute('onclick');
div.setAttribute('onclick', "window.open('" + results.productUrl + "')");

但每次更新时，它仍然会打开我关联的每个链接。因此，当用户最终单击 div 时，它会打开 10-20 个选项卡，而不仅仅是最近的链接。

我希望 setAttribute 只会覆盖以前的值，但甚至 removeAttribute 似乎也不起作用。当我“检查”页面时，仍然只有一个名为“MyReport”的 div，并且它只有一个“onclick”。

完整示例(Chrome 扩展程序)

要使用，请将manifest.json 和 amazon.user.js 放入一个目录中。然后在 Chrome 设置下启用“开发者模式”。单击“加载解压的扩展程序”并导航到您保存文件的文件夹。

manifest.json:

{
  "name": "AmazonLink",
  "version": "0.001",
  "manifest_version": 2,
  "description": "Adds link to Amazon page",
  "icons": {
  },
  "content_scripts": [
    {
      "matches": [
        "https://www.amazon.com/*"
        ],
      "js": ["amazon.user.js"]
    }
  ]
}

amazon.user.js:

function addAmazonLink() {
    // Page example: Baby K'tan Original Baby Carrier amazon.com/dp/B00FSKX266
    var element = document.getElementById('price_feature_div');
    var siblingToPlaceBefore = element.firstChild;
    if (element == null || siblingToPlaceBefore == null) return false;
    var fsDiv = document.createElement('div');
    fsDiv.setAttribute('style', 'text-decoration: none; text-align: center; border-radius: 5px;  position: relative; margin-bottom: 4px;padding:4px;max-width:270px');
    element.insertBefore(fsDiv, siblingToPlaceBefore);
    fsDiv.setAttribute('id', "MyLinkDiv");
    var txt = document.createTextNode("Click Me!");
    fsDiv.appendChild(txt);
    UpdateLink();
    return true;

}

function UpdateLink(num){
    var strLink = encodeURI("https://www.google.com?q=" + num);

    var div = document.getElementById("MyLinkDiv");
    if (div == null) {
        return;
    }

    div.removeAttribute('onclick'); // This shouldn't matter
    div.setAttribute('onclick', "window.open('" + strLink + "')");

    return true;
}

addAmazonLink();
setTimeout(function() {
    UpdateLink(1);
}, 500);
setTimeout(function() {
    UpdateLink(2);
}, 1500);
setTimeout(function() {
    UpdateLink(3);
}, 2500);
setTimeout(function() {
    UpdateLink(4);
}, 3500);

导航至 https://www.amazon.com/dp/B00FSKX266 后，你会看到“点击我!”在“添加到购物车”按钮上方。等待几秒钟，然后单击它。将打开多个 Google 页面，而不只是预期的 1 个。请注意，Amazon 上的不同产品使用不同的 CSS 类/id，因此虽然该示例将在上面的 B00FSKX266 产品上运行，但它可能无法在其他 Amazon 产品页面上运行

Answer 1

您的代码不起作用的原因是您向 div 添加了一个属性页面加载时。

div.setAttribute('onclick', "window.open('" + results.productUrl + "')");

它基本上翻译为

<div onclick="window.open('http://someurl.com/')"></div>

所以，解决方案是添加 window.open(url)在点击事件上。

var div = document.getElementById("MyReport");
var results = {productUrl: 'http://stackoverflow.com'};
div.addEventListener('click', function() {

    // Generating random url for demo 
    // "?test=" + Math.floor(Math.random() * 10000 + 1)
    // Write your logic to add url

    url = results.productUrl + "?test=" + Math.floor(Math.random() * 10000 + 1);
    window.open( url );
});

JsFiddle