Question

我在使用Chrome时遇到了一点问题：在JS中引用时访问了链接颜色：

<a href='javascript:openPage("p1", "p2");'>Link to a page with p1 and p2</a>

幕后的JS就像是：

this.openPage = function (p1, p2) {
    var url = "MyPage.aspx";
    url += "?Parameter1=" + p1;
    url += "&Parameter2=" + p2;
    window.open(url);
}

我使用（IE，Firefox，Edge）测试过的其他浏览器，一旦点击链接就会更改链接的颜色，即使没有为其明确编写CSS也是如此。但Chrome保持不变并持有它的位置。

我知道安全问题和a：访问过的功能非常有限，但我不会寻找任何花哨的东西，只是改变文本的颜色，你期望发生的事情，但不是＆＃＆＃ 39;吨。添加CSS不会有帮助

a
{
    text-decoration: none;
}
a:visited 
{
    text-decoration: none;
    color: #551A8B;
}

直接页面链接正常工作。

我可以添加

onclick="this.style.color='#551A8B';"

但改变应用中的所有链接将是一个相当大的挑战。任何帮助将不胜感激。

Answer 1

如果您希望链接显示在点击时点击，并避免因为href中的javascript而遇到任何问题，您可以尝试这样的事情

function doLink() {
  var p1 = this.getAttribute("data-p1");
  var p2 = this.getAttribute("data-p2");
  
  var url = "MyPage.aspx";
  url += "?Parameter1=" + p1;
  url += "&Parameter2=" + p2;
  alert(url)
}

var links = document.getElementsByClassName("color-change-links");

var link;
for (var i = 0; i < links.length; i += 1) {
  link = links[i];
  
  var p1 = link.getAttribute("data-p1");
  var p2 = link.getAttribute("data-p2");
  
  link.href = "#" + p1 + p2;
  link.onclick = doLink;
}

<a href="#" class="color-change-links" data-p1="link11" data-p2="link12">Link to a page with p1 and p2</a><br />
<a href="#" class="color-change-links" data-p1="link21" data-p2="link22">Link to a page with p1 and p2</a><br />
<a href="#" class="color-change-links" data-p1="link31" data-p2="link32">Link to a page with p1 and p2</a><br />
<a href="#" class="color-change-links" data-p1="link41" data-p2="link42">Link to a page with p1 and p2</a>

Answer 2

我同意toni的评论。您应该使用onclick来触发您的功能。还会在链接上添加无效的href，以使其无法访问。点击后，它将被访问。

<a href='#' onclick="openPage('param1', 'param2')">Link to a page with p1 and p2</a>

see it in code pen.

访问了chrome中的JS链接

2 个答案: