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似乎也无法正常工作。当我检查＆＃39;在该页面中，仍然只有一个名为＆＃39; MyReport＆＃39;的 div ，它只有一个＆＃39; onclick＆＃39;。

完整示例（Chrome扩展程序）

要使用，请将manifest.json和amazon.user.js放入目录中。然后在Chrome设置下，启用＆＃34;开发者模式＆＃34;。点击＆＃34;加载未包装的扩展程序＆＃34;并导航到保存文件的文件夹。

的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后，您会看到一个＆＃34;点击我！＆＃34;在添加到购物车按钮上方。等几秒钟，然后单击它。几个Google页面将打开，而不仅仅是预期的1. 请注意，亚马逊上的不同产品使用不同的CSS类/ ID，因此虽然示例将在上面的B00FSKX266产品上运行，但它可能无法在其他Amazon产品页面上运行< / em>的

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

如何在Chrome中清除setAttribute（＆＃39; onclick＆＃39;，＆＃39; window.open（）＆＃39;）的属性？

1 个答案: