Я пытаюсь открыть URL в новой вкладке, в отличие от всплывающего окна.
Я видел похожие вопросы, где ответы будут выглядеть примерно так:
window.open(url,'_blank');
window.open(url);
Но ни один из них не работал для меня, браузер все еще пытался открыть всплывающее окно.
Автор ничего не может сделать, чтобы открыть новую вкладку вместо нового окна; это предпочтение пользователя.
CSS3 предложил target-new, но спецификация была заброшена.
Обратное неверно; указав размеры для окна в третьем аргументе window.open(), вы можете вызвать новое окно, когда предпочтение отдается вкладкам.
Это трюк,
function openInNewTab(url) {
var win = window.open(url, '_blank');
win.focus();
}
В большинстве случаев это должно происходить непосредственно в обработчике onclick для ссылки, чтобы предотвратить блокировку всплывающих окон и поведение по умолчанию "нового окна". Вы можете сделать это таким образом, или добавив прослушиватель событий в ваш объект DOM.
<div onclick="openInNewTab('www.test.com');">Something To Click On</div>
http://www.tutsplanet.com/open-url-new-tab-using-javascript/
window.open() не будет открываться на новой вкладке, если это не происходит при фактическом событии клика. В приведенном примере URL-адрес открывается при фактическом событии клика. Это будет работать, если у пользователя есть соответствующие настройки в браузере.
<a class="link">Link</a>
<script type="text/javascript">
$("a.link").on("click",function(){
window.open('www.yourdomain.com','_blank');
});
</script>
Аналогично, если вы пытаетесь выполнить вызов Ajax в функции щелчка и хотите открыть окно с успехом, убедитесь, что вы выполняете вызов Ajax с помощью параметра async : false.
window.open Невозможно надежно открыть всплывающие окна в новой вкладке во всех браузерах Различные браузеры реализуют поведение window.open по-разному, особенно в отношении предпочтений браузера пользователя. Вы не можете ожидать того же поведения для window.open, чтобы быть правдой во всех обозревателях Internet Explorer, Firefox и Chrome из-за различных способов обработки пользовательских настроек браузера.
Например, пользователи Internet Explorer (11) могут открывать всплывающие окна в новом окне или новую вкладку , вы не можете заставить Internet Explorer 11 пользователей открывать всплывающие окна определенным образом через. > window.open, как указано в Quentin answer.
Как и для пользователей Firefox (29), использование window.open(url, '_blank') зависит от настроек вкладки браузера, хотя вы можете заставить их открывать всплывающие окна в новом окне, указав ширину и высоту (см. "Что такое Chrome?" Ниже).
Перейдите в настройки своего браузера и настройте его для открытия всплывающих окон в новом окне.
После настройки Internet Explorer (11) для открытия всплывающих окон в новом окне, как показано выше, используйте следующую тестовую страницу для тестирования window.open:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<button onclick="window.open('https://stackoverflow.com/q/4907843/456814');">
<code>window.open(url)</code>
</button>
<button onclick="window.open('https://stackoverflow.com/q/4907843/456814', '_blank');">
<code>window.open(url, '_blank')</code>
</button>
</body>
</html>
Обратите внимание, что всплывающие окна открываются в новом окне, а не в новой вкладке.
Вы также можете протестировать эти фрагменты выше в Firefox (29) с настройкой вкладки, установленной в новые окна, и увидеть те же результаты.
window.open В отличие от Internet Explorer (11) и Firefox (29).Я не уверен на 100%, но похоже, что Chrome (версия 34.0.1847.131 m) не имеет никаких настроек, которые пользователь может использовать, чтобы выбрать, открывать ли всплывающие окна в новом окне или новую вкладку (например, Firefox и Internet Explorer). Я проверил документацию Chrome для управления всплывающими окнами, но в этом ничего не упоминал.
Кроме того, еще раз, разные браузеры, похоже, по-разному реализуют поведение window.open .. В Chrome и Firefox с указанием ширины и высоты будет всплывающее окно, даже когда пользователь установил Firefox (29), чтобы открыть новые окна на новой вкладке (как указано в ответах на JavaScript в новом окне, а не вкладка):
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<button onclick="window.open('https://stackoverflow.com/q/4907843/456814', 'test', 'width=400, height=400');">
<code>window.open(url)</code>
</button>
</body>
</html>
Однако, тот же фрагмент кода выше всегда будет открывать новую вкладку в Internet Explorer 11, если пользователи установят вкладки в качестве своих настроек браузера,, даже не указывая ширину и высоту, заставят новое окно popup для них.
Таким образом, поведение window.open в Chrome, по-видимому, заключается в том, чтобы открывать всплывающие окна в новой вкладке при использовании в событии onclick, чтобы открыть их в новых окнах при использовании с консоли браузера (как было отмечено другими людьми), и открыть их в новых окнах, когда они указаны с шириной и высотой.
Различные браузеры реализуют поведение window.open по-разному в отношении предпочтений браузера пользователей. Вы не можете ожидать, что одинаковое поведение для window.open будет истинным во всех Internet Explorer, Firefox и Chrome, из-за разных способов обработки пользовательских настроек браузера.
Один лайнер:
Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
Это создает виртуальный a элемент, дает ему target="_blank", так что открывается в новой вкладке, дает ему правильную url - url href, а затем нажимает кнопку.
И если вы хотите, на основании этого вы можете создать некоторую функцию:
function openInNewTab(href) {
Object.assign(document.createElement('a'), {
target: '_blank',
href,
}).click();
}
и тогда вы можете использовать его как:
openInNewTab("http://google.com");
Если вы используете window.open(url, '_blank'), он будет заблокирован (блокировщик всплывающих окон) в Chrome.
Попробуй это:
//With JQuery
$('#myButton').click(function () {
var redirectWindow = window.open('http://google.com', '_blank');
redirectWindow.location;
});
С чистым JavaScript,
document.querySelector('#myButton').onclick = function() {
var redirectWindow = window.open('http://google.com', '_blank');
redirectWindow.location;
};
Чтобы разработать ответ Стивена Спилберга, я сделал это в таком случае:
$('a').click(function() {
$(this).attr('target', '_blank');
});
Таким образом, перед тем, как браузер будет следовать ссылке, я устанавливаю целевой атрибут, поэтому он откроет ссылку в новой вкладке или окне (зависит от пользовательских настроек).
Я использую следующее, и он работает очень хорошо.
window.open(url, '_blank').focus();
Интересным фактом является то, что новая вкладка не может быть открыта, если действие не вызывается пользователем (нажатие кнопки или что-то еще) или если оно асинхронно, например, это НЕ будет открываться на новой вкладке:
$.ajax({
url: "url",
type: "POST",
success: function() {
window.open('url', '_blank');
}
});
Но это может открыться на новой вкладке в зависимости от настроек браузера:
$.ajax({
url: "url",
type: "POST",
async: false,
success: function() {
window.open('url', '_blank');
}
});
Я думаю, что вы не можете контролировать это. Если пользователь установил свой браузер для открытия ссылок в новом окне, вы не можете заставить это открывать ссылки на новой вкладке.
Просто опустив параметры [strWindowFeatures], вы откроете новую вкладку, если не будет отменена настройка браузера (настройка браузера перехватывает JavaScript).
var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);
var myWin = window.open(strUrl, strWindowName);
- или -
var myWin = window.open(strUrl);
(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')))
Вы можете использовать трюк с form:
$(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();
}
Это не имеет ничего общего с настройками браузера, если вы пытаетесь открыть новую вкладку из пользовательской функции.
На этой странице откройте консоль JavaScript и введите:
document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();
И он попытается открыть всплывающее окно независимо от ваших настроек, потому что 'click' происходит от пользовательского действия.
Чтобы вести себя как фактический "щелчок мышью" по ссылке, вам нужно следовать @spirinvladimir advice и действительно создать его:
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>
Или вы могли бы просто создать элемент ссылки и щелкнуть его...
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);
Это не должно блокироваться блокировщиками всплывающих окон... Надеюсь.
function openTab(url) {
const link = document.createElement('a');
link.href = url;
link.target = '_blank';
document.body.appendChild(link);
link.click();
link.remove();
}
Я нашел легкую работу вокруг:
Шаг 1: Создайте невидимую ссылку:
<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>
Шаг 2: Нажмите на эту ссылку программно:
document.getElementById("yourId").click();
Ну вот! Работает на меня шармом.
Если это то, что вы просто пытаетесь загрузить в элемент, попробуйте использовать это. При загрузке страницы он добавит ваше целевое свойство с правильным атрибутом.
$ (your_element_here).prop('target', '_blank');
Как создать <a> с _blank как значение атрибута target и url как href, с отображением стиля: скрыто с элементом children? Затем добавьте в DOM и затем вызовите событие click для дочернего элемента.
Это не работает. Браузер предотвращает поведение по умолчанию. Это может быть вызвано программным способом, но оно не соответствует поведению по умолчанию.
Проверьте и убедитесь сами: http://jsfiddle.net/4S4ET/
попробуйте это для новой вкладки
window.open(URL , '_blank');
Это может быть взлом, но в Firefox, если вы укажете третий параметр, "fullscreen = yes", он откроет новое новое окно.
Например,
<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>
Кажется, что это действительно отменяет настройки браузера.
Открытие новой вкладки из расширения Firefox (Mozilla) происходит следующим образом:
gBrowser.selectedTab = gBrowser.addTab("http://example.com");
Этот способ аналогичен приведенному выше решению, но реализован по-разному
.social_icon → некоторый класс с CSS
<div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>
$('.social_icon').click(function(){
var url = $(this).attr('data-url');
var win = window.open(url, '_blank'); ///similar to above solution
win.focus();
});
эта работа для меня, просто запретите событие, добавьте URL-адрес в <a> tag, а затем запустите событие click на tag.
Js
$('.myBtn').on('click', function(event) {
event.preventDefault();
$(this).attr('href',"http://someurl.com");
$(this).trigger('click');
});
HTML
<a href="#" class="myBtn" target="_blank">Go</a>
Скажем, мы имеем div с id="link_pseudo" и a a с id="link_real", target="_blank" и a href
HTML:
<div id="link_pseudo">
...
</div>
<a id="link_real" target="_blank" href="example.com">...</a>
Мы можем имитировать щелчок на a при нажатии div с помощью реализации eventFire, сделанной KooiInc 1
JS 1:
function eventFire(el, etype){
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
Использование 1:
eventFire([some element], 'click');
Реализация:
если вы добавите onclick="eventFire(document.getElementById('link_real','click')" в div и добавьте решение KooiInc 1 в script, щелкнув div, он будет эмулировать щелчок тега a
Новый HTML:
<div id="link_pseudo" onclick="eventFire(document.getElementById('link_real','click')">
...
</div>
<a id="link_real" target="_blank" href="example.com">...</a>
<script>
function eventFire(el, etype){
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
</script>
Я знаю, он взламывает, но он называется обходным путем по причине
Я соглашусь с тем, кто написал (перефразировал здесь): "Для ссылки на существующей веб-странице браузер всегда откроет ссылку на новой вкладке, если новая страница является частью того же веб-сайт как существующая веб-страница". Для меня, по крайней мере, это "общее правило" работает в Chrome, Firefox, Opera, IE, Safari, SeaMonkey и Konqueror.
Во всяком случае, есть менее сложный способ воспользоваться тем, что представил другой человек. Предполагая, что мы говорим о вашем собственном веб-сайте ( "thissite.com" ниже), где вы хотите контролировать, что делает браузер, а затем ниже, вы хотите, чтобы "specialpage.htm" был ПУСТОЙ, в нем вообще не было HTML-кода ( экономит время на отправку данных с сервера!).
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):
<head>
<base target="_blank">
</head>
Если вы хотите открыть внешние ссылки (ссылки, которые идут на другие сайты), то этот бит JavaScript/jQuery работает хорошо:
$(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');
}
});
});
Каким-то образом сайт может это сделать. (У меня нет времени извлечь его из этого беспорядка, но это код)
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,<script>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)
Браузер всегда откроет ссылку на новой вкладке, если ссылка находится в том же домене (на том же сайте). Если ссылка находится в другом домене, она откроет ее в новой вкладке/окне, в зависимости от настроек браузера.
Итак, в соответствии с этим мы можем использовать:
<a class="my-link" href="#" onclick="location.href='http://www.mywebsite.com'; return false;" rel="http://www.otherwebsite.com">new tab</a>
И добавьте код jQuery:
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;
});
});
Итак, сначала откройте новое окно на том же сайте с _blank target (он откроет его на новой вкладке), а затем откройте ваш желаемый веб-сайт в этом новом окне.