Cách mô phỏng đích = xông _ trống trong JavaScript


156

Khi người dùng nhấp vào liên kết, tôi cần cập nhật một trường trong cơ sở dữ liệu và sau đó mở liên kết được yêu cầu trong một cửa sổ mới. Bản cập nhật không có vấn đề gì, nhưng tôi không biết cách mở một cửa sổ mới mà không yêu cầu họ nhấp vào một siêu liên kết khác.

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

1
Hửm target="_top"không mở trong một cửa sổ mới - target="_blank"không.
Tomalak

Nếu liên kết đã mở trong một cửa sổ mới (do target = "_ blank") và trình xử lý nhấp chuột javascript đã cập nhật cơ sở dữ liệu của bạn, tại sao bạn cần phải mở cửa sổ mới bằng Javascript?
Joel Mueller

Câu trả lời:


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

Tham số thứ hai là tùy chọn và là tên của cửa sổ đích.


2
window.openthực hiện những gì target="_blank"- nó sẽ mở URL trong một cửa sổ mới.
ceejayoz

3
Đúng. đối số thứ hai cho window.open () là "tên" bạn muốn đặt cho cửa sổ, tương tự như đặt mục tiêu trên một liên kết. developer.mozilla.org/En/DOM:window.open
Omer Bokhari

2
Ồ, tôi hiểu rồi. window.open bị chặn bởi trình chặn cửa sổ bật lên của Firefox, nhưng target = "_ blank" thì không. Tôi có nên yêu cầu khách hàng kích hoạt cửa sổ bật lên từ trang web của riêng họ không?
Phillip Senn

7
Có giải pháp JavaScript nào không bị chặn bởi các trình chặn cửa sổ bật lên như của Firefox không?
ma11hew28

4
@MattDiPasquale chặn window.open là một trong những điểm chặn của cửa sổ bật lên! Nếu bạn thực hiện cuộc gọi để phản hồi lại hành động nhấp chuột, nó có cơ hội tốt hơn để không bị chặn.
William Denniss

19

Điều này có thể giúp

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: "Lỗi Javascript thời gian chạy: không phải là hành động hợp lệ cho đối tượng"
T-moty

8
Câu trả lời này có thể được cải thiện bằng cách thêm một số mô tả về những gì đang xảy ra
Elly Post

13

Tôi biết đây là một thỏa thuận được thực hiện và sắp xếp, nhưng đây là những gì tôi đang sử dụng để giải quyết vấn đề trong ứng dụng của mình.

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

Về cơ bản những gì đang diễn ra ở đây là tôi chạy kiểm tra xem liên kết có target=_blankthuộc tính không. Nếu không, nó sẽ ngăn liên kết kích hoạt, thiết lập nó để mở trong một cửa sổ mới sau đó lập trình nhấp vào nó.

Bạn có thể tiến thêm một bước và bỏ qua việc dừng nhấp chuột ban đầu (và làm cho mã của bạn gọn hơn rất nhiều) bằng cách thử điều này:

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

Nếu bạn đang sử dụng jQuery để trừu tượng hóa việc triển khai thêm một trình duyệt chéo thuộc tính, bạn nên sử dụng cái này thay vì e.target.setAttribute("target", "_blank"):

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

Bạn có thể cần phải làm lại nó để phù hợp với trường hợp sử dụng chính xác của bạn, nhưng đây là cách tôi gãi ngứa.

Đây là bản demo của nó trong hành động để bạn gây rối.

(Liên kết trong jsfiddle quay lại cuộc thảo luận này .. không cần tab mới :))


1
Tôi thích câu trả lời này hơn tất cả bởi vì, tốt, nó sử dụng jquery và nó tránh được các vấn đề của trình chặn cửa sổ bật lên window.open. Điều này là hoàn toàn hợp pháp khi xử lý một số dữ liệu của bên thứ 3 có chứa các liên kết bị thiếu mục tiêu.
IncredibleHat

7

Cá nhân tôi thích sử dụng mã sau nếu nó là cho một liên kết duy nhất. Nếu không, có lẽ tốt nhất nếu bạn tạo một hàm có mã tương tự.

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

Tôi bắt đầu sử dụng điều đó để bỏ qua bài kiểm tra nghiêm ngặt XHTML của W3C.


1
Tôi nghĩ rằng JavaScript nội tuyến lộn xộn hơn việc thêm một thuộc tính "không chuẩn" hoạt động ở mọi nơi.
Matti Virkkunen

@MattiVirkkunen trong một số tình huống, đó là giải pháp duy nhất
Claudiu Creanga

1
@Claudiu: Nếu bạn thấy mình trong một tình huống vô lý như vậy, bạn nên khắc phục nguyên nhân hơn là bùn xung quanh nó.
Matti Virkkunen

5

Đây là cách tôi làm với jQuery. Tôi có một lớp cho mỗi liên kết mà tôi muốn được mở trong cửa sổ mới.

$(function(){

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

2

Bạn có thể trích xuất href từ thẻ:

window.open(document.getElementById('redirect').href);

1

Điều này có thể giúp bạn mở tất cả các liên kết trang :

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

Nó sẽ mở mọi <a href="" class="myClass"></a>mục liên kết sang một tab khác giống như bạn đã nhấp vào từng mục.

Bạn chỉ cần dán nó vào bảng điều khiển trình duyệt. Yêu cầu khung jQuery

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.