Як імітувати target = "_ blank" в JavaScript


156

Коли користувач натискає посилання, мені потрібно оновити поле в базі даних, а потім відкрити запитане посилання у новому вікні. Оновлення не є проблемою, але я не знаю, як відкрити нове вікно, не вимагаючи від них натиснути на інше гіперпосилання.

<body onLoad="document.getElementById('redirect').click">
<a href="http://www.mydomain.com?ReportID=1" id="redirect" target="_blank">Report</a>
</body>

1
Гм? target="_top"не відкривається у новому вікні - target="_blank"робить.
Томалак

Якщо посилання вже відкривається в новому вікні (через target = "_ blank") і обробник клацання javascript вже оновлює вашу базу даних, навіщо вам взагалі потрібно відкривати нове вікно з Javascript?
Джоель Мюллер

Відповіді:


298
<script>
    window.open('http://www.example.com?ReportID=1', '_blank');
</script>

Другий параметр не є обов'язковим і є ім'ям цільового вікна.


2
window.openробить те, що target="_blank"робить - відкриває URL-адресу в новому вікні.
ceejayoz

3
так. другий аргумент window.open () - це "ім'я", якому ви хочете надати вікно, подібно до встановлення цілі на посилання. developer.mozilla.org/En/DOM:window.open
Омер Бокхарі

2
О Я бачу. window.open блокується блокатором спливаючих вікон Firefox, але target = "_ blank" не є. Чи потрібно просто попросити клієнта включити спливаючі вікна з власного веб-сайту?
Філіп Сенн

7
Чи є рішення JavaScript, яке не блокується блокаторами спливаючих вікон, як у Firefox?
ma11hew28

4
@MattDiPasquale блокує window.open - це щось на кшталт блокаторів спливаючих вікон! Якщо ви здійснюєте дзвінок у відповідь на дію натискання, це більше шансів не бути заблокованим.
Вільям Денніс

19

Це може допомогти

var link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
    link.href = 'http://www.google.com';
    link.target = '_blank';
    var event = new MouseEvent('click', {
        'view': window,
        'bubbles': false,
        'cancelable': true
    });
    link.dispatchEvent(event);

IE11: "Помилка Javascript Javascript: недійсна дія для об'єкта"
T-moty,

8
Цю відповідь можна було б покращити, додавши опис того, що відбувається
Еллі Пост

13

Я знаю, що це зроблена та розібрана угода, але ось що я використовую для вирішення проблеми у своєму додатку.

if (!e.target.hasAttribute("target")) {
    e.preventDefault();     
    e.target.setAttribute("target", "_blank");
    e.target.click();
    return;
}

В основному, тут відбувається те, що я запускаю перевірку на наявність посилання на target=_blankатрибут. Якщо цього не відбувається, він зупиняє запуск посилання, встановлює його відкриватися в новому вікні, після чого програмно клацає на ньому.

Ви можете піти на крок далі і пропустити зупинку оригінального клацання (і зробити свій код набагато компактнішим), спробувавши це:

if (!e.target.hasAttribute("target")) {
    e.target.setAttribute("target", "_blank");
}

Якщо ви використовували jQuery, щоб відмовитись від реалізації додавання атрибуту крос-браузера, слід використовувати це замість e.target.setAttribute("target", "_blank"):

    jQuery(event.target).attr("target", "_blank")

Можливо, вам доведеться переробити його, щоб відповідати вашому точному випадку використання, але ось як я почухав свій свербіж.

Ось демонстрація цього в дії для вас, щоб зіпсуватись.

(Посилання в jsfiddle повертається до цього обговорення. Не потрібно нової вкладки :))


1
Я більше віддаю перевагу цій відповіді, оскільки він використовує jquery, і це уникає проблем з блокувальним вікном window.open. Це цілком законно при роботі з деякими сторонніми даними, що містять посилання, на яких відсутня ціль.
IncredibleHat

7

Я особисто вважаю за краще використовувати наступний код, якщо він стосується одного посилання. Інакше, мабуть, найкраще, якщо ви створите функцію з подібним кодом.

onclick="this.target='_blank';"

Я почав використовувати це, щоб обійти суворий тест XHTML W3C.


1
Я думаю, що вбудований JavaScript є більш безладним, ніж додавання "нестандартного" атрибута, який працює скрізь.
Матті Вірккунен

@MattiVirkkunen у певних ситуаціях - це єдине рішення
Claudiu Creanga

1
@Claudiu: Якщо ви опинилися в такій абсурдній ситуації, вам слід скоріше виправити причину, а не хитатися навколо неї.
Матті Вірккунен

5

Ось так я це роблю з jQuery. У мене є клас для кожного посилання, яке я хочу відкрити в новому вікні.

$(function(){

    $(".external").click(function(e) {
        e.preventDefault();
        window.open(this.href);
    });
});


1

Це може допомогти вам відкрити всі посилання на сторінку :

$(".myClass").each(
     function(i,e){
        window.open(e, '_blank');
     }
);

Це відкриє всі <a href="" class="myClass"></a>елементи посилань на іншу вкладку, як ви б натиснули кожну.

Потрібно лише вставити його на консоль браузера. Необхідна рамка jQuery

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.