Какой лучший способ открыть новое окно браузера?
Я знаю, что большинство ссылок следует оставить конечным пользователям, чтобы решить, как их открывать, но мы не можем отрицать, что вам приходится почти "вынуждать" в новое окно (например, для сохранения данных в форме на текущей странице).
Что я хотел бы знать, так это то, что консенсус заключается в "лучшем" способе открыть ссылку в новом окне браузера.
Я знаю, что <a href="url" target="_blank">
отсутствует. Я также знаю, что <a href="#" onclick="window.open(url);">
не идеален по целому ряду причин. Я также попытался полностью заменить якоря чем-то вроде <span onclick="window.open(url);">
, а затем заклейте SPAN как ссылку.
Одно из решений, к которым я склоняюсь, - это <a href="url" rel="external">
и использование JavaScript для установки всех целей на "_blank" на те привязки, отмеченные как "внешние".
Есть ли другие идеи? Что лучше? Я ищу самый XHTML-совместимый и простой способ сделать это.
UPDATE: Я говорю, что target = "_ blank" - нет, потому что я читал в несколько мест, на которые идет целевой атрибут для постепенного отказа от XHTML.
Ответы
Ответ 1
Я использую последний предложенный вами метод. Я добавляю rel= "внешний" или что-то подобное, а затем используйте jQuery для итерации по всем ссылкам и назначения им обработчика кликов:
$(document).ready(function() {
$('a[rel*=external]').click(function(){
window.open($(this).attr('href'));
return false;
});
});
Я считаю это лучшим методом, потому что:
- это очень ясно семантически: у вас есть ссылка на внешний ресурс
- соответствует стандартам
- он изящно деградирует (у вас очень простая ссылка с обычным атрибутом
href
).
- он по-прежнему позволяет пользователю щелкнуть по ссылке и открыть ее на новой вкладке, если они пожелают
Ответ 2
Почему target="_blank"
плохая идея?
Он должен делать именно то, что вы хотите.
edit: (см. комментарии), но я думаю, что использование javascript для выполнения такой задачи может привести к тому, что некоторые люди будут очень расстроены (те, кто посередине посещает в новом окне по привычке, и тех, кто использует расширение NoScript)
Ответ 3
Пожалуйста, не заставляйте открывать ссылку в новом окне.
Причины против:
- Это нарушает правило наименьшего удивления.
- Задняя кнопка не работает, и пользователь, возможно, не знает почему.
- Что происходит в браузерах с вкладками? Новая вкладка или новое окно? И что бы ни случилось, это то, что вы хотите, если вы смешиваете вкладки и окна?
Причина, по которой я всегда слышу в пользу открытия нового окна, заключается в том, что пользователь не покинет сайт. Но будьте уверены, я никогда не вернусь на сайт, который меня раздражает. И если сайт отнимает у меня контроль, это большая досада.
Возможно, вы даете две ссылки, одна - обычная, другая открывает ее в новом окне. Добавьте вторую с небольшим символом после обычной ссылки. Таким образом, пользователи вашего сайта будут контролировать, на какую ссылку они хотят нажать.
Ответ 4
Вот плагин, который я написал для jQuery
(function($){
$.fn.newWindow = function(options) {
var defaults = {
titleText: 'Link opens in a new window'
};
options = $.extend(defaults, options);
return this.each(function() {
var obj = $(this);
if (options.titleText) {
if (obj.attr('title')) {
var newTitle = obj.attr('title') + ' ('
+ options.titleText + ')';
} else {
var newTitle = options.titleText;
};
obj.attr('title', newTitle);
};
obj.click(function(event) {
event.preventDefault();
var newBlankWindow = window.open(obj.attr('href'), '_blank');
newBlankWindow.focus();
});
});
};
})(jQuery);
Пример использования
$('a[rel=external]').newWindow();
Вы также можете изменить или удалить текст заголовка, передав некоторые параметры
Пример изменения текста заголовка:
$('a[rel=external]').newWindow( { titleText: 'This is a new window link!' } );
Пример, чтобы удалить его alltogether
$('a[rel=external]').newWindow( { titleText: '' } );
Ответ 5
Возможно, я что-то не понимаю, но почему бы вам не использовать target = "_ blank"? То, как я это сделаю. Если вы ищете наиболее совместимый, тогда любой JavaScript будет отсутствовать, так как вы не можете быть уверены, что клиент включен JS.
Ответ 6
<a href="http://some.website.com/" onclick="return !window.open( this.href );">link text</a>
Подробности описаны в моем ответе на другой вопрос.
Ответ 7
<a href="http://www.google.com" onclick="window.open(this.href); return false">
Это все равно откроет ссылку (хотя и в том же окне), если пользователь отключил JS. В противном случае он работает точно так же, как target = blank, и он прост в использовании, поскольку вам просто нужно добавить функцию onclick (возможно, используя JQuery) ко всем нормальным тегам.
Ответ 8
Если вы используете какой-либо вкус строгого doctype или грядущие реальные xhtml-ароматы, цель не допускается...
Используя переходный, независимо от того, что является HTML4.01 или XHTML1, вы можете использовать решение Damirs, хотя ему не удается реализовать свойство windowName, которое необходимо в window.open():
В обычном html:
<a href="..." target="_blank" onclick="window.open(this.href, 'newWin'); return false;">link</a>
Если, однако, вы используете один из строгих доктризмов, единственным способом открытия ссылок было бы использовать это решение без атрибута target...
- между прочим, количество не-js-браузеров часто ошибочно вычисляется, и поиск номеров счетчиков относится к очень разным числам, и мне интересно, сколько из этих не-js-браузеров являются сканерами и т.п.! -)
Ответ 9
Если я на странице формы и нажав ссылку Moreinfo.html(например), я потерял данные, если я не открою ее в новой вкладке/окне, просто скажите мне.
Вы можете обмануть меня, открыв новую вкладку/окно с помощью window.open() или target = "_ blank", но у меня могут быть отключены цели и всплывающие окна. Если JS, цели и всплывающие окна необходимы для того, чтобы обмануть меня в открытии нового окна/вкладки, скажите мне, прежде чем я начну в форме.
Или сделайте ссылку на другую страницу запросом формы, чтобы при представлении посетителя текущие данные формы были сохранены, чтобы они могли продолжить с последнего раза, если это возможно.
Ответ 10
Я использую это...
$(function() {
$("a:not([href^='"+window.location.hostname+"'])").click(function(){
window.open(this.href);
return false;
}).attr("title", "Opens in a new window");
});