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

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

Ответ 1 · рейтинг 69 · jpsimons

Есть "новые окна" и есть "всплывающие окна". Использование 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, который переходит по ссылке, по которой они щелкнули, открывая ее в новом окне или вкладке. Это запасной вариант, так что, по крайней мере, контент доступен (если не красив).

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

<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

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