Làm cách nào để đặt mục tiêu _blank trong Javascript?

Sẽ có lúc bạn muốn người dùng của mình nhấp vào liên kết trang web và mở nó trong tab trình duyệt mới. Nhưng làm thế nào để bạn làm điều đó trong HTML?

Trong bài viết này, tôi sẽ hướng dẫn các bạn cách sử dụng thuộc tính target="_blank" thông qua các đoạn mã ví dụ. Tôi cũng sẽ nói về thời điểm bạn nên cân nhắc sử dụng thuộc tính này

Cách mở một tab trình duyệt mới bằng cách sử dụng target="_blank"

Thuộc tính target="_blank" được sử dụng bên trong thẻ neo mở như thế này

Khi người dùng nhấp vào liên kết, một tab trình duyệt mới sẽ tự động mở đến trang đó

Trong ví dụ này, tôi đã lồng một liên kết bên trong một tập hợp các thẻ đoạn văn để hướng mọi người đến freeCodeCamp

To learn how to code for free, please visit freeCodeCamp.org

Khi bạn nhấp vào liên kết freeCodeCamp, nó sẽ mở ra một tab trình duyệt mới cho bạn

Nếu tôi bỏ qua thuộc tính target="_blank", thì hành vi mặc định sẽ là rời khỏi trang web hiện tại và truy cập trực tiếp vào liên kết mà không cần mở tab trình duyệt mới

Từ khóa noopener là gì?

Từ khóa noopener trong thuộc tính

To learn how to code for free, please visit freeCodeCamp.org

1 được sử dụng chủ yếu vì lý do bảo mật để ngăn người dùng có ác ý gây rối với trang web gốc thông qua thuộc tính

To learn how to code for free, please visit freeCodeCamp.org

2. Nếu người dùng độc hại có quyền truy cập vào đối tượng cửa sổ của bạn thì họ có thể chuyển hướng trang của bạn đến một URL độc hại

Bạn có thể sử dụng từ khóa noopener như một cách giúp ngăn chặn sự cố bảo mật đó xảy ra. Đây là cách sử dụng từ khóa noopener

DevDocs documentation

Nếu bạn muốn tìm hiểu thêm về các vấn đề bảo mật mà

To learn how to code for free, please visit freeCodeCamp.org

5 đã giúp giải quyết, vui lòng đọc qua bài viết hữu ích này

Cập nhật cho từ khóa noopener

Vào năm 2021, đã có một bản cập nhật trong đó các trình duyệt hiện đại hiện đặt

To learn how to code for free, please visit freeCodeCamp.org

5 cho bất kỳ liên kết nào bằng thuộc tính

To learn how to code for free, please visit freeCodeCamp.org

8. Như bạn có thể thấy trong bảng Tôi có thể sử dụng không, từ khóa noopener được hầu hết các trình duyệt hỗ trợ ngoại trừ Internet Explorer 11

Ngay cả với bản cập nhật này, nhiều nhà phát triển vẫn sẽ sử dụng

To learn how to code for free, please visit freeCodeCamp.org

5 cho các liên kết sử dụng thuộc tính

To learn how to code for free, please visit freeCodeCamp.org

8

Bạn có nên sử dụng thuộc tính target="_blank" mọi lúc không?

Khi người dùng nhấp vào một liên kết, hành vi mặc định là mở liên kết đó trên trang hiện tại mà họ đang truy cập mà không cần mở tab trình duyệt mới. Trong nhiều trường hợp, bạn không muốn thay đổi hành vi mặc định này vì người dùng ngày càng mong đợi điều này

Bạn phải suy nghĩ cẩn thận về thời điểm thích hợp để sử dụng thuộc tính target="_blank". Một ví dụ điển hình là nếu người dùng đang làm việc trên một trang và họ không muốn rời khỏi trang đó nếu họ nhấp vào liên kết

Trong ví dụ này, chúng tôi đang liên kết đến tài liệu DevDocs, vì vậy người dùng có thể ở lại trang hiện tại của họ và tra cứu tài liệu tham khảo trên tab mới

Phần kết luận

Bạn có thể sử dụng thuộc tính target="_blank" nếu bạn muốn người dùng của mình nhấp vào liên kết mở ra tab trình duyệt mới

Thuộc tính target="_blank" được sử dụng bên trong thẻ neo mở như thế này

Từ khóa noopener trong thuộc tính

To learn how to code for free, please visit freeCodeCamp.org

1 được thêm vào để ngăn những người dùng có ác ý gây rối với trang web gốc thông qua thuộc tính

To learn how to code for free, please visit freeCodeCamp.org

2

Bạn phải suy nghĩ cẩn thận về thời điểm thích hợp để sử dụng thuộc tính target="_blank" vì bạn không muốn luôn thay đổi hành vi mặc định của liên kết

Tôi hy vọng bạn thích bài viết này và chúc may mắn trên hành trình lập trình của bạn

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO


Làm cách nào để đặt mục tiêu _blank trong Javascript?
Jessica Wilkins

Tôi là một nhạc sĩ và một lập trình viên


Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Làm cách nào để thêm mục tiêu _blank trong JavaScript?

Thuộc tính đích HTML xác định nơi tài liệu được liên kết sẽ mở khi người dùng nhấp vào liên kết. Nếu target=”_blank” được đặt với phần tử neo, thì tài liệu được liên kết sẽ mở trong một tab mới nếu không thì tài liệu sẽ được mở trong cùng một tab .

Làm cách nào để sử dụng mục tiêu _blank?

a target=”_blank” Mở trong Tab (hoặc Cửa sổ) trình duyệt mới Thuộc tính target chỉ định nơi tài liệu được liên kết sẽ mở khi . Mặc định là cửa sổ hiện hành. Nếu target="_blank" , tài liệu được liên kết sẽ mở trong một tab mới hoặc (trên các trình duyệt cũ hơn) một cửa sổ mới.

Làm cách nào để đặt mục tiêu cho cửa sổ đang mở trong JavaScript?

Sử dụng hàng đầu. vị trí. href và các mục tiêu liên kết khác trong Java. Viết mã bằng HTML hoặc JavaScript để nhắm mục tiêu các liên kết sao cho chúng mở trong các cửa sổ trống mới, trong các khung chính, trong các khung trong trang hiện tại hoặc trong một khung cụ thể trong một bộ khung

Việc sử dụng _blank trên thuộc tính mục tiêu neo là gì?

Thuộc tính đích có giá trị “_blank” mở tài liệu được liên kết trong cửa sổ hoặc tab mới .