JavaScript/jQuery - Открыть текущую ссылку во всплывающем окне

<a href="http://google.com">Link</a>

Как я могу открыть эту ссылку во всплывающем окне? И не позволяйте браузеру блокировать его


person Alex    schedule 10.07.2010    source источник


Ответы (5)


Есть «новые окна» и есть «всплывающие окна». Использование target=_blank откроет новое окно, за исключением того, что современные браузеры по умолчанию помещают новые окна в новые вкладки. Что звучит так, как будто это не то, что вы хотите.

Для фактического всплывающего окна вам нужно window.open(), и обязательно укажите определенную ширину и высоту, иначе некоторые браузеры все равно поместят новое окно в новую вкладку. Пример Дарина выглядит хорошо для меня.

Что касается блокировки всплывающих окон, общий подход, используемый браузерами, заключается в том, что всплывающие окна, инициированные действием пользователя, разрешены (например, кликом), в то время как всплывающие окна, инициированные спонтанно с помощью скрипта, такие как этот, блокируются:

<script type="text/javascript">
    window.open("http://www.google.com/", "Google", "width=500,height=500");
</script>

Однако блокировка рекламы — это эскалация войны, и вы никогда не можете быть уверены, что всплывающее окно откроется. Если ваше всплывающее окно заблокировано, вызов window.open возвращает значение null. Поэтому я бы изменил пример Дарена следующим образом:

<a href="http://www.google.com/"
    onclick="return !window.open(this.href, 'Google', 'width=500,height=500')"
    target="_blank">

Если всплывающее окно заблокировано, onclick возвращает true, который переходит по ссылке, по которой они щелкнули, открывая ее в новом окне или вкладке. Это запасной вариант, так что, по крайней мере, контент доступен (если не красив).

person jpsimons    schedule 10.07.2010
comment
Я также должен добавить, что это хорошая идея, чтобы ваш всплывающий контент не был полностью сломан, если он открывается в полноразмерном окне браузера, из-за этого резерва и потому, что пользователь всегда может щелкнуть ссылку правой кнопкой мыши и открыть в новой вкладке. или окно, которое вообще обходит обработчик onClick. - person jpsimons; 10.07.2010

Это откроет новое окно.

<a href="http://google.com" target="_blank">Link</a>
person Codler    schedule 10.07.2010
comment
Если вы используете XHTML Strict, атрибут target не проверяется, и вместо этого вы должны прикрепить событие (например, 'onclick'). Если вы используете более старый тип документа, вам подойдет target="_blank". - person Andrew; 10.07.2010
comment
@Andrew - IMO, это было абсолютно нелепым решением со стороны W3C (отказ от поддержки target) ... решение, которое было отменено в HTML5, на случай, если кто-то обнаружит это позже, задаваясь вопросом. - person Nick Craver; 10.07.2010
comment
В последнее время я не следил за спецификациями HTML5, но следил за последними версиями W3C говорит, что target по-прежнему не нужен. Откажитесь от него вообще. Я не защищаю это, но идея в том, что HTML должен использоваться для макета (определения отношений между данными страницы), CSS — для представления, а JS — для поведения. И в этой системе щелчок по ссылке, чтобы открыть окно, является поведением. Тем не менее, CSS-расширения HTML5 полны подобных нарушений, поэтому я не вижу, в чем проблема. - person Andrew; 11.07.2010

jQuery:

<script>
$('#button2').live("click",function(e){    
  window.open("http://www.google.com", "yyyyy", "width=480,height=360,resizable=no,toolbar=no,menubar=no,location=no,status=no");
return false;
});
</script>

<a href="#" id="button2" ><img src="images/online.png"></a><br/>Online
person Community    schedule 17.01.2014
comment
live устарел в jquery 1.6, я полагаю, используйте .on(click, function(){}); - person mahatmanich; 17.03.2014

Вы можете попробовать код ниже,

<script type="text/javascript">
     window.open(location.href, "Google", "width=500,height=500");
</script>
person creativedirektor    schedule 23.03.2016

person    schedule
comment
Одна интересная ошибка, которую я заметил согласно window.open. если URL-адрес начинается с http://..., он не работает, т.е. ... - person Simon; 10.07.2010