Html 在新窗口中打开链接后如何使用 JavaScript 更改 href 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15385207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change href attribute using JavaScript after opening the link in a new window?
提问by Mike Elucidate
I have a link on my page
我的页面上有一个链接
<a href="http://google.com" id="mylink" onclick="changeLink();" target="_blank">google</a>
And the goal is to follow this link (opening in a new tab) and change its attributes (on previous tab). I mean we open google.com in a new tab and if we look back on the link, it's refreshed.
目标是点击此链接（在新选项卡中打开）并更改其属性（在上一个选项卡上）。我的意思是我们在新标签页中打开 google.com，如果我们回顾链接，它会刷新。
I've tried this js code
我试过这个js代码
function changeLink(){
document.getElementById("mylink").href = "http://facebook.com";
document.getElementById("mylink").innerHTML = "facebook";
}
But it also changes the target of new opening tab. Instead of opening google it opens facebook in my example.
但它也改变了新打开标签的目标。在我的示例中，它不是打开 google 而是打开 facebook。
Is it possible to fix it?
有没有可能修复它？
回答by Pete
Your onclickfires before the href so it will change before the page is opened, you need to make the function handle the window opening like so:
你onclick在 href 之前触发，所以它会在页面打开之前改变，你需要让函数像这样处理窗口打开：
function changeLink() {
var link = document.getElementById("mylink");
window.open(
link.href,
'_blank'
);
link.innerHTML = "facebook";
link.setAttribute('href', "http://facebook.com");
return false;
}
回答by jcubic
You can delay your code using setTimeoutto execute after click
您可以使用setTimeout点击后执行来延迟您的代码
function changeLink(){
setTimeout(function() {
var link = document.getElementById("mylink");
link.setAttribute('href', "http://facebook.com");
document.getElementById("mylink").innerHTML = "facebook";
}, 100);
}
回答by artahian
Replace
代替
onclick="changeLink();"
by
经过
onclick="changeLink(); return false;"
to cancel its default action
取消其默认操作
回答by Hodaya Shalom
You can change this in the page load.
您可以在页面中更改此设置load。
My intention is that when the page comes to the loadfunction, switch the links (the current link in the required one)
我的意图是，当页面来到load功能时，切换链接（当前链接在需要的那个）
回答by Aris
for example try this :
例如试试这个：
<a href="http://www.google.com" id="myLink1">open link 1</a><br/> <a href="http://www.youtube.com" id="myLink2">open link 2</a>
document.getElementById("myLink1").onclick = function() {
window.open(
"http://www.facebook.com"
);
return false;
};
document.getElementById("myLink2").onclick = function() {
window.open(
"http://www.yahoo.com"
);
return false;
};
回答by motss
Is there any downside of leveraging mousedownlistener to modify the hrefattribute with a new URL location and then let the browser figures out where it should redirect to?
利用mousedown侦听器修改href具有新 URL 位置的属性，然后让浏览器确定它应该重定向到哪里有什么缺点吗？
It's working fine so far for me. Would like to know what the limitations are with this approach?
到目前为止对我来说工作正常。想知道这种方法有哪些限制？
// Simple code snippet to demonstrate the said approach
const a = document.createElement('a');
a.textContent = 'test link';
a.href = '/haha';
a.target = '_blank';
a.rel = 'noopener';
a.onmousedown = () => {
a.href = '/lol';
};
document.body.appendChild(a);
}
