我试图在一个新的选项卡中打开一个URL,而不是弹出窗口。
我见过一些相关的问题,其中的回答大致如下:
window.open(url,'_blank');
window.open(url);
但没有一个对我有效,浏览器仍然试图打开一个弹出窗口。
我试图在一个新的选项卡中打开一个URL,而不是弹出窗口。
我见过一些相关的问题,其中的回答大致如下:
window.open(url,'_blank');
window.open(url);
但没有一个对我有效,浏览器仍然试图打开一个弹出窗口。
当前回答
(function(a) {
document.body.appendChild(a);
a.setAttribute('href', location.href);
a.dispatchEvent((function(e) {
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
return e
}(document.createEvent('MouseEvents'))))
}(document.createElement('a')))
其他回答
只要省略strWindowFeatures参数,就会打开一个新选项卡,除非浏览器设置覆盖它(浏览器设置胜过JavaScript)。
新建窗口
var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);
新建选项卡
var myWin = window.open(strUrl, strWindowName);
--或--
var myWin = window.open(strUrl);
这个问题有答案,但不是否定的。
我找到了一个简单的解决方法:
步骤1:创建不可见链接:
<a id=“yourId”href=“yourlink.html”target=“_blank”style=“display:none;”></a>
步骤2:以编程方式单击该链接:
document.getElementById(“yourId”).click();
干得好!这对我很有吸引力。
为了阐述史蒂文·斯皮尔伯格的答案,我在这样一个案例中这样做了:
$('a').click(function() {
$(this).attr('target', '_blank');
});
这样,就在浏览器跟随链接之前,我正在设置目标属性,因此它将在新的选项卡或窗口中打开链接(取决于用户的设置)。
jQuery中的一行示例:
$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.
这也可以通过使用本机浏览器DOM API来实现:
document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();
window.open(url)将在一个新的浏览器选项卡中打开url。下面是替代它的JavaScript:
let a = document.createElement('a');
a.target = '_blank';
a.href = 'https://support.wwf.org.uk/';
a.click(); // We don't need to remove 'a' from the DOM, because we did not add it
这里是一个工作示例(StackOverflow片段不允许打开新选项卡)。
如果您试图从自定义功能打开新选项卡,则这与浏览器设置无关。
在此页面中,打开JavaScript控制台并键入:
document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();
它会尝试打开一个弹出窗口,而不管您的设置如何,因为“点击”来自自定义操作。
为了表现得像一个链接上的实际“鼠标点击”,您需要遵循spirinvradimir的建议并真正创建它:
document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
false, false, false, false, 0, null);
return e
}(document.createEvent('MouseEvents'))));
这里有一个完整的示例(不要在jsFiddle或类似的在线编辑器上尝试,因为它不会让您从那里重定向到外部页面):
<!DOCTYPE html>
<html>
<head>
<style>
#firing_div {
margin-top: 15px;
width: 250px;
border: 1px solid blue;
text-align: center;
}
</style>
</head>
<body>
<a id="my_link" href="http://www.google.com"> Go to Google </a>
<div id="firing_div"> Click me to trigger custom click </div>
</body>
<script>
function fire_custom_click() {
alert("firing click!");
document.getElementById("my_link").dispatchEvent((function(e){
e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
0, 0, 0, 0, 0, /* detail, screenX, screenY, clientX, clientY */
false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
0, null); /* button, relatedTarget */
return e
}(document.createEvent('MouseEvents'))));
}
document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>