使用JavaScript在新选项卡（而不是新窗口）中打开URL


Open a URL in a new tab (and not a new window) using JavaScript

我试图在一个新的选项卡中打开一个URL，而不是弹出窗口。

我已经看到了相关问题的答案如下：

1
2
window.open(url,'_blank');
window.open(url);

但是没有一个对我有用，浏览器仍然试图打开一个弹出窗口。

相关讨论

这是个骗局，

1
2
3
4
function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

号

在大多数情况下，这应该直接发生在链接的onclick处理程序中，以防止弹出拦截器和默认的"新窗口"行为。您可以这样做，也可以将事件侦听器添加到您的DOM对象中。

1
Something To Click On

Open a URL in a new tab using JavaScript

相关讨论

作者无法选择在新选项卡中打开而不是在新窗口中打开；这是用户首选项。

CSS3提出了新的目标，但规范被放弃了。

相反，通过在window.open()的第三个参数中为窗口指定维度，可以在首选项为选项卡时触发一个新窗口。

相关讨论

如果实际单击事件上没有发生，则window.open()将不会在新选项卡中打开。在给出的示例中，URL是在实际单击事件上打开的。如果用户在浏览器中有适当的设置，这将起作用。

1
2
3
4
5
Link
<script  type="text/javascript">
     $("a.link").on("click",function(){
         window.open('www.yourdomain.com','_blank');
     });

。

同样，如果您试图在click函数中执行Ajax调用，并且希望在成功时打开一个窗口，请确保您正在使用async : false选项集执行Ajax调用。

相关讨论

window.open无法在所有浏览器的新选项卡中可靠地打开弹出窗口。

不同的浏览器以不同的方式实现window.open的行为，特别是在用户的浏览器首选项方面。您不能期望window.open在所有Internet Explorer、Firefox和Chrome中都具有相同的行为，因为它们处理用户浏览器首选项的方式不同。

例如，Internet Explorer(11)用户可以选择在新窗口或新选项卡中打开弹出窗口，您不能强制Internet Explorer 11用户通过window.open以某种方式打开弹出窗口，如Quentin的回答所述。

至于firefox(29)用户，使用window.open(url, '_blank')取决于他们浏览器的选项卡首选项，尽管您仍然可以通过指定宽度和高度强制他们在新窗口中打开弹出窗口(请参见"Chrome怎么样？"以下部分)。

演示

转到浏览器的设置并将其配置为在新窗口中打开弹出窗口。

Internet Explorer(11)

Internet Explorer settings dialog 1。

氧化镁

测试页

将Internet Explorer(11)设置为在如上所示的新窗口中打开弹出窗口后，使用以下测试页测试window.open：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    Test
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814');">
      <wyn>window.open(url)</wyn>
    </button>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', '_blank');">
      <wyn>window.open(url, '_blank')</wyn>
    </button>
  </body>
</html>

观察弹出窗口是否在新窗口中打开，而不是在新选项卡中打开。

您也可以在上面的firefox(29)中测试这些代码片段，并将其选项卡首选项设置为新窗口，然后看到相同的结果。

铬呢？它与Internet Explorer(11)和FireFox(29)不同，实现了window.open。

我不是100%确定，但看起来Chrome(版本34.0.1847.131 m)似乎没有任何设置可供用户选择是否在新窗口或新选项卡中打开弹出窗口(如Firefox和Internet Explorer)。我查看了管理弹出窗口的chrome文档，但它没有提到这类事情。

同样，不同的浏览器似乎以不同的方式实现window.open的行为。在chrome和firefox中，指定宽度和高度将强制弹出窗口，即使用户已将firefox(29)设置为在新选项卡中打开新窗口(如在新窗口中打开的javascript答案中所述，而不是选项卡)：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    Test
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', 'test', 'width=400, height=400');">
      <wyn>window.open(url)</wyn>
    </button>
  </body>
</html>

号

但是，如果用户将选项卡设置为浏览器首选项，则上面相同的代码段将始终在Internet Explorer 11中打开一个新的选项卡，即使不指定宽度和高度，也会强制弹出一个新的窗口。

因此，在chrome中，window.open的行为似乎是在onclick事件中使用时在新选项卡中打开弹出窗口，从浏览器控制台(如其他人所注意的那样)使用时在新窗口中打开它们，并在指定宽度和高度时在新窗口中打开它们。

总结

不同的浏览器在用户的浏览器偏好方面实现window.open的行为是不同的。您不能期望window.open在所有Internet Explorer、Firefox和Chrome中都具有相同的行为，因为它们处理用户浏览器首选项的方式不同。

附加阅读

  • window.open文件。
相关讨论

一个衬里：

1
Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

。

它创建了一个虚拟的a元素，给它target="_blank"，所以它在新的选项卡中打开，给它适当的urlhref，然后单击它。

如果你愿意，基于此你可以创建一些函数：

1
2
3
4
5
6
function openInNewTab(href) {
  Object.assign(document.createElement('a'), {
    target: '_blank',
    href,
  }).click();
}

。

然后你可以像这样使用它：

1
openInNewTab("http://google.com");
相关讨论

如果您使用window.open(url, '_blank')，它将在chrome上被阻止(弹出阻止程序)。

试试这个：

1
2
3
4
5
6
//With JQuery

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
});

使用纯javascript，

1
2
3
4
document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};

。

相关讨论

为了阐述史蒂文·斯皮尔伯格的回答，我在这种情况下这样做了：

1
2
3
$('a').click(function() {
  $(this).attr('target', '_blank');
});

这样，就在浏览器跟踪链接之前，我正在设置目标属性，因此它将使链接在新的选项卡或窗口中打开(取决于用户的设置)。

我用下面的方法，效果很好！！！！

1
window.open(url, '_blank').focus();

号

相关讨论

一个有趣的事实是，如果用户未调用该操作(单击按钮或其他)，或者如果该操作是异步的，则无法打开新选项卡，例如，这将不会在新选项卡中打开：

1
2
3
4
5
6
7
$.ajax({
    url:"url",
    type:"POST",
    success: function() {
        window.open('url', '_blank');              
    }
});

但这可能会在新选项卡中打开，具体取决于浏览器设置：

1
2
3
4
5
6
7
8
$.ajax({
    url:"url",
    type:"POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});

。

相关讨论

我想你控制不了这个。如果用户已将其浏览器设置为在新窗口中打开链接，则无法强制该浏览器在新选项卡中打开链接。

javascript在新窗口中打开，而不是选项卡

省略[strWindowFeatures]参数将打开一个新选项卡，除非浏览器设置覆盖(浏览器设置胜过javascript)。

新建窗口

1
var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);

新建选项卡

1
var myWin = window.open(strUrl, strWindowName);

。

--或--

1
var myWin = window.open(strUrl);
相关讨论

你可以对form使用一个技巧：

1
2
3
4
5
6
7
8
9
10
11
12
$(function () {
    $('#btn').click(function () {
        openNewTab("http://stackoverflow.com")
        return false;
    });
});

function openNewTab(link) {
    var frm = $('<form   method="get" action="' + link + '" target="_blank"></form>')
    $("body").append(frm);
    frm.submit().remove();
}

号

JSfiddle演示

相关讨论

1
2
3
4
5
6
7
(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')))
相关讨论

如果您试图从自定义函数打开一个新选项卡，这与浏览器设置无关。

在此页面中，打开一个javascript控制台并键入：

1
2
document.getElementById("nav-questions").setAttribute("target","_blank");
document.getElementById("nav-questions").click();

号

它会尝试打开一个弹出窗口，不管你的设置如何，因为"点击"来自一个自定义操作。

为了表现得像链接上的实际"鼠标单击"，您需要遵循@spirinvladimir的建议并真正创建它：

1
2
3
4
5
6
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'))));

号

下面是一个完整的例子(不要在jfiddle或类似的在线编辑器上尝试，因为它不会让您从那里重定向到外部页面)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
  <style>
    #firing_div {
      margin-top: 15px;
      width: 250px;
      border: 1px solid blue;
      text-align: center;
    }
  </style>
</head>
<body>
   Go to Google
   Click me to trigger custom click
</body>

  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;

</html>

号

相关讨论

或者你可以创建一个链接元素并点击它…

1
2
3
4
5
6
7
var evLink = document.createElement('a');
evLink.href = 'http://' + strUrl;
evLink.target = '_blank';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);

。

这不应该被任何弹出窗口阻止程序阻止…有希望地。

相关讨论

这个问题有答案，但不是没有。

I found an easy work around:

号

步骤1:创建不可见链接：

埃多克斯1〔6〕

步骤2:以编程方式单击该链接：

埃多克斯1〔10〕

干得好！对我有吸引力。

相关讨论

如果您正试图将其加载到元素中，请尝试使用此方法。在页面加载时，它将添加具有正确属性的目标属性。

$(此处为您的_元素)。prop("target"，"_blank")；

相关讨论

如何创建一个，其中_blank作为target属性值，url作为href，样式显示：用子元素隐藏？然后添加到DOM，然后在子元素上触发click事件。

更新

那不管用。浏览器会阻止默认行为。它可以通过编程方式触发，但不遵循默认行为。

亲自查看：http://jsfiddle.net/4s4et/

相关讨论

这可能是一次黑客攻击，但在火狐中，如果您指定了第三个参数"全屏=是"，它将打开一个新窗口。

例如，

1
MyPDF

它似乎实际上覆盖了浏览器设置。

相关讨论

在火狐(Mozilla)扩展中打开一个新的标签如下：

1
gBrowser.selectedTab = gBrowser.addTab("http://example.com");

号

这种方法与上述解决方案类似，但实现方式不同

.social_icon->some class with css

1
2
3
4
5
6
 $('.social_icon').click(function(){

        var url = $(this).attr('data-url');
        var win = window.open(url, '_blank');  ///similar to above solution
        win.focus();
   });

。

这对我来说很有效，只需防止事件发生，将URL添加到tag上，然后触发该tag上的单击事件。

1
2
3
4
5
6
7
8
Js
$('.myBtn').on('click', function(event) {
        event.preventDefault();
        $(this).attr('href',"http://someurl.com");
        $(this).trigger('click');
});
HTML
Go

号

相关讨论

我同意写这篇文章的人的观点(在这里意译)："对于现有网页中的链接，如果新网页与现有网页属于同一个网站，浏览器将始终在新选项卡中打开链接。"至少对我来说，这个"一般规则"在Chrome、Firefox、Opera、IE、Safari、SeaMonkey和Konquerror中有效。

无论如何，有一种不那么复杂的方法可以利用对方的陈述。假设我们谈论的是您自己的网站("thissite.com"在下面)，您希望控制浏览器的功能，然后，在下面，您希望"specialpage.htm"为空，其中完全没有HTML(节省了从服务器发送数据的时间！).

1
2
3
4
5
6
7
8
9
10
11
12
13
 var wnd, URL;  //global variables

 //specifying"_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing page
 wnd = window.open("http://www.thissite.com/specialpage.htm","_blank"); //get reference to just-opened page
 //if the"general rule" above is true, a new tab should have been opened.
 URL ="http://www.someothersite.com/desiredpage.htm";  //ultimate destination
 setTimeout(gotoURL(),200);  //wait 1/5 of a second; give browser time to create tab/window for empty page


 function gotoURL()
 { wnd.open(URL,"_self");  //replace the blank page, in the tab, with the desired page
   wnd.focus();             //when browser not set to automatically show newly-opened page, this MAY work
 }

如果您只想打开外部链接(指向其他站点的链接)，那么这一点的javascript/jquery工作得很好：

1
2
3
4
5
6
7
8
9
$(function(){
    var hostname = window.location.hostname.replace('www.', '');
    $('a').each(function(){
        var link_host = $(this).attr('hostname').replace('www.', '');
        if (link_host !== hostname) {
            $(this).attr('target', '_blank');
        }
    });
});

。

相关讨论

不知何故，一个网站可以做到。(我没有时间从这一团糟中抽出来，但这就是代码)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
if (!Array.prototype.indexOf)
    Array.prototype.indexOf = function(searchElement, fromIndex) {
        if (this === undefined || this === null)
            throw new TypeError('"this" is null or not defined');
        var length = this.length >>> 0;
        fromIndex = +fromIndex || 0;
        if (Math.abs(fromIndex) === Infinity)
            fromIndex = 0;
        if (fromIndex < 0) {
            fromIndex += length;
            if (fromIndex < 0)
                fromIndex = 0
        }
        for (; fromIndex < length; fromIndex++)
            if (this[fromIndex] === searchElement)
                return fromIndex;
        return -1
    };
(function Popunder(options) {
    var _parent, popunder, posX, posY, cookieName, cookie, browser, numberOfTimes, expires = -1,
        wrapping, url ="",
        size, frequency, mobilePopupDisabled = options.mobilePopupDisabled;
    if (this instanceof Popunder === false)
        return new Popunder(options);
    try {
        _parent = top != self && typeof top.document.location.toString() ==="string" ? top : self
    } catch (e) {
        _parent = self
    }
    cookieName ="adk2_popunder";
    popunder = null;
    browser = function() {
        var n = navigator.userAgent.toLowerCase(),
            b = {
                webkit: /webkit/.test(n),
                mozilla: /mozilla/.test(n) && !/(compatible|webkit)/.test(n),
                chrome: /chrome/.test(n),
                msie: /msie/.test(n) && !/opera/.test(n),
                firefox: /firefox/.test(n),
                safari: /safari/.test(n) && !/chrome/.test(n),
                opera: /opera/.test(n)
            };
        b.version = b.safari ? (n.match(/.+(?:ri)[\/: ]([\d.]+)/) || [])[1] : (n.match(/.+(?:ox|me|ra|ie)[\/:]([\d.]+)/) || [])[1];
        return b
    }();
    initOptions(options);

    function initOptions(options) {
        options = options || {};
        if (options.wrapping)
            wrapping = options.wrapping;
        else {
            options.serverdomain = options.serverdomain ||"ads.adk2.com";
            options.size = options.size ||"800x600";
            options.ci ="3";
            var arr = [],
                excluded = ["serverdomain","numOfTimes","duration","period"];
            for (var p in options)
                options.hasOwnProperty(p) && options[p].toString() && excluded.indexOf(p) === -1 && arr.push(p +"=" + encodeURIComponent(options[p]));
            url ="http://" + options.serverdomain +"/player.html?rt=popunder&" + arr.join("&")
        }
        if (options.size) {
            size = options.size.split("x");
            options.width = size[0];
            options.height = size[1]
        }
        if (options.frequency) {
            frequency = /([0-9]+)\/([0-9]+)(\w)/.exec(options.frequency);
            options.numOfTimes = +frequency[1];
            options.duration = +frequency[2];
            options.period = ({
                m:"minute",
                h:"hour",
                d:"day"
            })[frequency[3].toLowerCase()]
        }
        if (options.period)
            switch (options.period.toLowerCase()) {
                case"minute":
                    expires = options.duration * 60 * 1e3;
                    break;
                case"hour":
                    expires = options.duration * 60 * 60 * 1e3;
                    break;
                case"day":
                    expires = options.duration * 24 * 60 * 60 * 1e3
            }
        posX = typeof options.left !="undefined" ? options.left.toString() : window.screenX;
        posY = typeof options.top !="undefined" ? options.top.toString() : window.screenY;
        numberOfTimes = options.numOfTimes
    }

    function getCookie(name) {
        try {
            var parts = document.cookie.split(name +"=");
            if (parts.length == 2)
                return unescape(parts.pop().split(";").shift()).split("|")
        } catch (err) {}
    }

    function setCookie(value, expiresDate) {
        expiresDate = cookie[1] || expiresDate.toGMTString();
        document.cookie = cookieName +"=" + escape(value +"|" + expiresDate) +";expires=" + expiresDate +";path=/"
    }

    function addEvent(listenerEvent) {
        if (document.addEventListener)
            document.addEventListener("click", listenerEvent, false);
        else
            document.attachEvent("onclick", listenerEvent)
    }

    function removeEvent(listenerEvent) {
        if (document.removeEventListener)
            document.removeEventListener("click", listenerEvent, false);
        else
            document.detachEvent("onclick", listenerEvent)
    }

    function isCapped() {
        cookie = getCookie(cookieName) || [];
        return !!numberOfTimes && +numberOfTimes <= +cookie[0]
    }

    function pop() {
        var features ="type=fullWindow, fullscreen, scrollbars=yes",
            listenerEvent = function() {
                var now, next;
                if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
                    if (mobilePopupDisabled)
                        return;
                if (isCapped())
                    return;
                if (browser.chrome && parseInt(browser.version.split(".")[0], 10) > 30 && adParams.openNewTab) {
                    now = new Date;
                    next = new Date(now.setTime(now.getTime() + expires));
                    setCookie((+cookie[0] || 0) + 1, next);
                    removeEvent(listenerEvent);
                    window.open("javascript:window.focus()","_self","");
                    simulateClick(url);
                    popunder = null
                } else
                    popunder = _parent.window.open(url, Math.random().toString(36).substring(7), features);
                if (wrapping) {
                    popunder.document.write("<html><head></head><body>" + unescape(wrapping ||"") +"</body></html>");
                    popunder.document.body.style.margin = 0
                }
                if (popunder) {
                    now = new Date;
                    next = new Date(now.setTime(now.getTime() + expires));
                    setCookie((+cookie[0] || 0) + 1, next);
                    moveUnder();
                    removeEvent(listenerEvent)
                }
            };
        addEvent(listenerEvent)
    }
    var simulateClick = function(url) {
        var a = document.createElement("a"),
            u = !url ?"data:text/html,window.close();<\/script>;" : url,
            evt = document.createEvent("MouseEvents");
        a.href = u;
        document.body.appendChild(a);
        evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, true, 0, null);
        a.dispatchEvent(evt);
        a.parentNode.removeChild(a)
    };

    function moveUnder() {
        try {
            popunder.blur();
            popunder.opener.window.focus();
            window.self.window.focus();
            window.focus();
            if (browser.firefox)
                openCloseWindow();
            else if (browser.webkit)
                openCloseTab();
            else
                browser.msie && setTimeout(function() {
                    popunder.blur();
                    popunder.opener.window.focus();
                    window.self.window.focus();
                    window.focus()
                }, 1e3)
        } catch (e) {}
    }

    function openCloseWindow() {
        var tmp = popunder.window.open("about:blank");
        tmp.focus();
        tmp.close();
        setTimeout(function() {
            try {
                tmp = popunder.window.open("about:blank");
                tmp.focus();
                tmp.close()
            } catch (e) {}
        }, 1)
    }

    function openCloseTab() {
        var ghost = document.createElement("a"),
            clk;
        document.getElementsByTagName("body")[0].appendChild(ghost);
        clk = document.createEvent("MouseEvents");
        clk.initMouseEvent("click", false, true, window, 0, 0, 0, 0, 0, true, false, false, true, 0, null);
        ghost.dispatchEvent(clk);
        ghost.parentNode.removeChild(ghost);
        window.open("about:blank","PopHelper").close()
    }
    pop()
})(adParams)

。

相关讨论

如果链接位于同一域(在同一网站上)，浏览器将始终在新选项卡中打开链接。如果链接在其他域上，它将在新的选项卡/窗口中打开它，具体取决于浏览器设置。

因此，根据这一点，我们可以使用：

1
new tab

并添加一些jquery代码：

1
2
3
4
5
6
7
8
jQuery(document).ready(function () {
    jQuery(".my-link").on("click",function(){
        var w = window.open('http://www.mywebsite.com','_blank');
        w.focus();
        w.location.href = jQuery(this).attr('rel');
        return false;
    });
});

。

所以，首先在同一个网站上打开一个新窗口，目标为空(它将在新标签中打开)，然后在新窗口中打开您想要的网站。