Ссылка с target = "_ blank" не открывается на новой вкладке в Chrome

В этот веб-сайт верхняя аккордеонная навигация содержит элемент под названием "Foundation": (скриншот).

Этот элемент создается кодом HTML:

<a href="#" onclick="location.href='http://www.foracure.org.au'; return false;" target="_blank" style="width: 105px;"></a>

Однако в Chrome, когда вы нажимаете на этот элемент, новый веб-сайт не открывается на новой вкладке.

Не могли бы вы рассказать мне, почему? Спасибо.

Ответ 1

Поскольку JavaScript обрабатывает событие click. Когда вы нажимаете, вызывается следующий код:

el.addEvent('click', function(e){
    if(obj.options.onOpen){
        new Event(e).stop();
        if(obj.options.open == i){
            obj.options.open = null;
            obj.options.onClose(this.href, i);
        }else{
            obj.options.open = i;
            obj.options.onOpen(this.href, i);
        }   
    }       
})

onOpen вручную изменяет location.

Изменить: Что касается вашего комментария... Если вы можете изменить ImageMenu.js, вы можете обновить script, который вызывает onClose, чтобы передать объект элемента a (this, а не this.href)

obj.options.onClose(this, i);

Затем обновите экземпляр ImageMenu со следующим изменением onOpen:

window.addEvent('domready', function(){
    var myMenu = new ImageMenu($$('#imageMenu a'), {
        openWidth: 310,
        border: 2,
        onOpen: function(e, i) {
            if (e.target === '_blank') {
                window.open(e.href);    
            } else {
                location = e.href;
            }
        }
    });
});

Это проверит свойство target элемента, чтобы увидеть, если оно _blank, а затем вызовите window.open, если он найден.

Если вы не хотите изменять ImageMenu.js, другой вариант - изменить ваши ссылки, чтобы идентифицировать их в вашем обработчике onOpen. Скажите что-то вроде:

<a href="http://www.foracure.org.au/#_b=1" target="_blank" style="width: 105px;"></a>

Затем обновите свой вызов onOpen, чтобы:

onOpen: function(e, i) {
    if (e.indexOf('_b=1') > -1) {
        window.open(e);   
    } else {
        location = e;
    }
}

Единственным недостатком этого является то, что пользователь видит хэш при наведении.

Наконец, если количество ссылок, которые вы планируете открыть в новом окне, будет низким, вы можете создать карту и проверить ее. Что-то вроде:

var linksThatOpenInANewWindow = {
    'http://www.foracure.org.au': 1
};

onOpen: function(e, i) {
    if (linksThatOpenInANewWindow[e] === 1) {
        window.open(e);   
    } else {
        location = e
    }
}

Единственный недостаток - это обслуживание, в зависимости от количества ссылок....

Другие предложили изменить ссылку (используя # или javascript:) и добавить обработчик события inline (onclick). Я не рекомендую это вообще, поскольку он прерывает ссылки, когда JS отключен/не поддерживается.

Удачи!

Ответ 2

Replace 

<a href="http://www.foracure.org.au" target="_blank"></a>    

with 

<a href="#" onclick='window.open("http://www.foracure.org.au");return false;'></a>

в вашем коде и будет работать в Chrome и других браузерах.

Спасибо Анураг

Ответ 3

По какой-то причине он не работает, поэтому мы можем сделать это по-другому.

просто удалите строку и добавьте следующее: -

<a onclick="window.open ('http://www.foracure.org.au', ''); return false" href="javascript:void(0);"></a>

Удачи.

Ответ 4

Ваш синтаксис для целевого атрибута верен, но браузеру это не нужно. Они могут интерпретировать его как открытие места назначения на новой вкладке, а не в новом окне, или они могут полностью игнорировать атрибут. У браузеров есть настройки для таких проблем. Кроме того, открытие новых окон может быть предотвращено с помощью плагинов браузера (обычно предназначенных для предотвращения раздражающих рекламных объявлений).

Вы можете сделать это как автор. Возможно, вы захотите открыть новое окно с помощью JavaScript, ср. к принятому ответу target = "_ blank" не работает в firefox?, но браузеры могут еще более неохотно позволить страницам открывать новые окна таким образом, как через цель.

target = "_blank" не работает в firefox?

Ответ 5

Если вы используете React, это должно работать:

<a href="#" onClick={()=>window.open("https://...")}</a>