Mã HTML để tạo siêu liên kết mở tab hoặc cửa sổ trình duyệt mới

Bạn đang xem: html mở trong tab mới

Cách tạo liên kết mở trong cửa sổ hoặc tab mới

Mã HTML để mở liên kết trong cửa sổ hoặc tab trình duyệt mới

Cách tạo liên kết mở trong cửa sổ hoặc tab mới

của Christopher Heng,

của Christopher Heng, thesitewizard.com

Một người đã hỏi tôi về cách anh ta có thể tạo các siêu liên kết trên trang web của mình để mở một cửa sổ hoặc tab trình duyệt mới khi được nhấp vào.
Bài báo này trả lời câu hỏi đó.

Điều kiện tiên quyết

Vì khách truy cập không nêu rõ anh ta đang sử dụng trình chỉnh sửa web nào, tôi sẽ giả sử ở đây rằng anh ta đang làm việc trực tiếp
trong HTML.

Lưu ý rằng điều này không có nghĩa là bạn không thể làm theo hướng dẫn này nếu bạn sử dụng
trình chỉnh sửa web trực quan hoặc nếu trang web của bạn sử dụng
một số loại phần mềm viết blog .
Nó chỉ đơn thuần có nghĩa là bạn sẽ cần phải truy cập bằng cách nào đó vào mã HTML của trang để bạn có thể sửa đổi nó. Hầu hết các trình chỉnh sửa web
và phần mềm viết blog cho phép bạn làm điều này.

Ví dụ: nếu bạn đang sử dụng Web Biểu thức, bạn có thể sửa đổi mã HTML của trang web của mình bằng cách chuyển sang
chế độ Mã. Hướng dẫn cho điều này có thể được tìm thấy trong bài báo
Cách Chèn mã HTML
vào một Trang Web có Web Biểu thức
. Tương tự, người dùng Dreamweaver có thể làm theo các bước được cung cấp trong
Cách chèn
Mã HTML thô trong Dreamweaver
, hướng dẫn sử dụng BlueGriffon
Cách Chèn mã HTML
trong BlueGriffon
và hướng dẫn cho người dùng KompoZer
Cách Chèn HTML
trong KompoZer
.

Cách mở siêu liên kết trong cửa sổ hoặc tab trình duyệt mới

Câu trả lời ngắn gọn là: chỉ cần thêm thuộc tính target = "_ blank" vào các liên kết của bạn (thẻ liên kết).

Ví dụ: nếu bạn có một liên kết cho biết như sau:

& lt; a href = “https://www.thesitewizard.com/” & gt; thesitewizard.com & lt; / a & gt;

Thay đổi ở trên để bây giờ nó nói:

& lt; a href = “https://www.thesitewizard.com/” target = “_ blank” & gt; thesitewizard.com & lt; / a & gt;

Giờ đây, khi khách truy cập của bạn nhấp vào liên kết đó, liên kết đó sẽ mở ra trong một cửa sổ hoặc tab mới (tùy thuộc vào trình duyệt web mà họ
đang sử dụng và cách họ định cấu hình trình duyệt đó).

Lưu ý rằng nếu trang web của bạn sử dụng LOẠI TÀI LIỆU “nghiêm ngặt” của XHTML 1.0 hoặc 1.1, bạn sẽ không thể thực hiện
ở trên và vẫn có trang của bạn xác thực
đúng
. Tuy nhiên, tôi nghi ngờ rằng hầu như không ai sử dụng chúng, vì vậy đừng lo lắng nếu bạn không hiểu những gì tôi vừa nói trong
Đoạn văn này. Tuy nhiên, phiên bản “chuyển tiếp” của các DOCTYPE đó vẫn ổn vì thuộc tính target
vẫn được hỗ trợ ở đó.

Nếu bạn đang sử dụng Web Expression, Dreamweaver, BlueGriffon hoặc KompoZer, chỉ cần nhấp vào một nơi nào đó trong liên kết mà bạn muốn sửa đổi,
chuyển sang chế độ cho phép bạn thay đổi mã HTML (xem các hướng dẫn được liệt kê trước đó trong
Điều kiện tiên quyết
để tìm hiểu cách thực hiện việc này) và thêm thuộc tính target = "_ blank" .

Xem Thêm  Cách xóa bảng trong SQL - lệnh xóa bảng trong sql

Nó không mang lại lợi ích mà bạn nghĩ nó mang lại

Tôi biết rằng một số quản trị viên web mới dường như có ấn tượng khiến các liên kết bên ngoài mở ra trong một cửa sổ mới
giúp ngăn mọi người rời khỏi trang web của bạn. Đây là một giả định sai lầm. Nếu ai đó nhấp vào
trên một liên kết và muốn quay lại trang web của bạn, họ sẽ chỉ cần nhấn vào nút Quay lại trên trình duyệt của họ. Hầu hết mọi người, thậm chí
những người không chuyên về máy tính, hãy tìm hiểu tính năng này của trình duyệt của họ trong thời gian ngắn sau khi khám phá ra Internet. Các
Ngoài ra, người dùng thành thạo còn học cách nhấp chuột phải vào liên kết và chọn “Mở trong tab mới” (hoặc cửa sổ) khi họ cần
một liên kết được hiển thị trong một tab hoặc cửa sổ riêng biệt.

Khi bạn tạo các liên kết mở trong một cửa sổ mới, bạn thực sự đang ngăn cản những người mới quay trở lại
trang web của bạn
. Bạn có thể nghĩ rằng họ sẽ biết cách chuyển về cửa sổ ban đầu một cách đơn giản. Kinh nghiệm của tôi với
những người như vậy đề nghị khác; họ bị cản trở bởi nút Quay lại không hoạt động và thậm chí không biết rằng họ đang
nhìn vào một tab hoặc cửa sổ mới. Khi họ không thể tìm ra cách giải quyết vấn đề, họ sẽ từ bỏ và chuyển sang
những thứ khác.

Tình hình không tốt hơn với những người dùng có kinh nghiệm. Mặc dù họ có thể nhận ra rằng họ đang xem một tab hoặc cửa sổ mới,
và có thể quay lại, họ có xu hướng rất khó chịu với trang web của bạn vì đã mở cửa sổ mà không có sự cho phép của họ. Rốt cuộc,
họ là những người sử dụng quyền lực: nếu họ muốn mở một cửa sổ mới, họ sẽ tự mở nó; họ không muốn bạn làm điều đó
mà không có sự đồng ý của họ. Còn tệ hơn nếu tất cả các liên kết của bạn mở trong cửa sổ mới (dẫn đến tình huống hài hước được mô tả
trong bài viết của tôi về những sai lầm về khả năng sử dụng
được thực hiện bởi quản trị viên web nghiệp dư
).

Nó làm cho trang web của bạn dễ bị tấn công lừa đảo

Tại thời điểm này được viết, khi bạn mở một trang mới với target = "_ blank" , trang web bạn liên kết đến
có quyền truy cập vào cửa sổ / tab chứa trang của bạn và có thể thay đổi nó (trong trình duyệt của khách truy cập) để hiển thị
một địa chỉ web khác.

Điều này không chỉ ngăn cản nỗ lực của bạn để giữ khách truy cập vào trang web của bạn (nếu đó là mục đích của bạn), nó còn
nguy hiểm tiềm tàng cho họ. Ví dụ: nếu bạn có trang đăng nhập, trang được liên kết với có thể
thay thế nó bằng một trên một trang web khác trông giống như của bạn, nhưng thực sự thu thập chi tiết đăng nhập của khách truy cập của bạn.
Loại tấn công này được gọi là “lừa đảo”. Ngay cả khi trang web của bạn không có tiện nghi cho khách truy cập
để đăng nhập, trang web được liên kết đến có thể thay thế nó bằng một trang phát tán phần mềm độc hại.

Lỗ hổng này không phải là giả thuyết. Những người trong Nhóm bảo mật của Google đã lưu ý rằng
“quan trọng
số lượng báo cáo “
về” tabnabling “như vậy được sử dụng để cung cấp phần mềm độc hại.

Xem Thêm  Cấu trúc C ++ với ví dụ - cấu trúc trong c ++ là gì

Chi tiết kỹ thuật (chỉ dành cho những người quan tâm): trang web mới mở có quyền truy cập hạn chế vào trang của bạn qua
đối tượng JavaScript window.opener . Đây là một đối tượng đọc / ghi mà họ có thể thao tác.
Nó có một thuộc tính gọi là window.opener.location có thể bị thay đổi, khiến trình duyệt
để chuyển đến một URL mới thay vì ở lại trang của bạn. Nếu bạn không hiểu đoạn này, hãy bỏ qua. Của nó
chỉ là phiên bản kỹ thuật của lời giải thích được đưa ra trước đó.

Bạn có thể ngăn điều này xảy ra trong một số trình duyệt bằng cách thêm rel = "noopener noreferrer"
đến liên kết của bạn. Với điều này được thêm vào, ví dụ trên sẽ trở thành:

& lt; a href = “https://www.thesitewizard.com/” rel = “noopener noreferrer” target = “_ blank” & gt; thesitewizard.com & lt; / a & gt;

Về mặt lý thuyết, rel = "noopener" hoặc rel = "noreferrer" là đủ để ngăn chặn
vấn đề này, với rel = "noopener" là thuộc tính chính xác để sử dụng. (Người khác,
rel = "noreferrer" , có tác dụng phụ là trình duyệt cũng sẽ giữ lại URL giới thiệu.)
Tuy nhiên, tại thời điểm này, không phải tất cả các trình duyệt đều hỗ trợ rel = "noopener" . Tương tự như vậy,
rel = "noreferrer" cũng không được một số trình duyệt hỗ trợ. Vì danh sách các trình duyệt hỗ trợ
thuộc tính không giống nhau, nếu bạn muốn bảo vệ này khỏi tập hợp con trình duyệt lớn nhất có thể, bạn sẽ
có lẽ cần phải sử dụng cả hai.

Điều đó nói rằng, cách giải quyết này chỉ hữu ích với các phiên bản Chrome, Firefox và Safari mới hơn. Internet Explorer không
không có một cơ sở như vậy, mặc dù từ thử nghiệm lướt qua của tôi, phiên bản 11 dường như miễn nhiễm với cuộc tấn công trong
vùng bảo mật mặc định. Tôi không chắc về Microsoft Edge.

Nói cách khác, phương pháp chi tiết ở trên không phải là hoàn toàn tuyệt đối 100%. Cách tốt nhất để tránh sự cố
là sử dụng các liên kết bình thường
, không có target = "_ blank" .

Kết luận

Khuyến nghị chung của tôi là tránh mở liên kết trong cửa sổ hoặc tab mới, nếu có thể. Tất nhiên có thể có
các trường hợp cụ thể cần điều này (đó là lý do tại sao một cơ sở như vậy tồn tại ngay từ đầu, đối với những trường hợp hiếm hoi
trường hợp có thể được yêu cầu). Nếu vậy, bạn có thể muốn cảnh báo khách truy cập của mình bằng cách nói những điều như
“mở trong một cửa sổ mới” bên cạnh liên kết của bạn (nếu nó phù hợp). Nó sẽ không giúp ích cho người dùng Internet bình thường, những người
sẽ không biết bạn đang nói gì hoặc làm thế nào để đối phó với nó và nó sẽ không bảo vệ họ khỏi các cuộc tấn công sử dụng trang web của bạn,
nhưng ít nhất bạn sẽ không làm khó chịu những người truy cập Internet có kinh nghiệm hơn.

Bản quyền © 2015-2019 Christopher Heng. Mọi quyền được bảo lưu.
Nhận thêm các mẹo và bài viết miễn phí như this ,
về thiết kế web, quảng cáo, doanh thu và kịch bản, từ https://www.thesitewizard.com/ .

thesitewizard ™ News Feed (RSS Site Feed)

Bạn có thấy bài viết này hữu ích không? Bạn có thể tìm hiểu các bài báo và tập lệnh mới được xuất bản trên
thesitewizard.com
bằng cách đăng ký nguồn cấp RSS. Chỉ cần trỏ trình đọc nguồn cấp RSS của bạn hoặc trình duyệt hỗ trợ nguồn cấp RSS tại
https://www.thesitewizard.com/thesitewizard.xml .
Bạn có thể đọc thêm về cách đăng ký
Nguồn cấp dữ liệu trang RSS
từ Câu hỏi thường gặp về RSS của tôi.

Xem Thêm  Văn bản trung tâm HTML - Cách căn chỉnh theo chiều dọc CSS - căn chỉnh dọc trung tâm div

Vui lòng không in lại bài viết này

Bài viết này đã được đăng ký bản quyền. Vui lòng không sao chép hoặc phân phối toàn bộ hoặc một phần bài viết này, dưới mọi hình thức.

Các bài viết liên quan

Bài viết mới

Các bài báo phổ biến

Cách liên kết đến trang này

Để liên kết đến trang này từ trang web của bạn, chỉ cần cắt và dán mã sau vào
trang web. (Chuyển sang chế độ nguồn HTML của trình chỉnh sửa web của bạn trước khi dán.)

Nó sẽ xuất hiện trên trang của bạn dưới dạng:

Cách tạo liên kết mở trong cửa sổ hoặc tab mới


Xem thêm những thông tin liên quan đến chủ đề html mở trong một tab mới

How To Make A lInk Open In A New Tab

  • Tác giả: Computer And Internet Tips
  • Ngày đăng: 2014-02-27
  • Đánh giá: 4 ⭐ ( 9100 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: We previously showed you how to make a clickable link.In this video we show you how to make that link open in a new window or tab..
    How To Create A Link – http://internettipstv.blogspot.ie/2014/02/this-tutorial-shows-you-how-to-create.html

Hướng dẫn tạo tabs bằng HTML, CSS và Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 3157 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HIển thị nội dung theo các tabs là một trong những kỹ thuật rất hiệu quả khi trang web của bạn có chứa nhiều nội dung ở các thể loại khác nhau, nó cũng rất.

Làm sao để mở một liên kết trong tab mới trên WordPress?

  • Tác giả: namdenroi.com
  • Đánh giá: 5 ⭐ ( 2670 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này mình sẽ cho bạn một số phương pháp mở liên kết trong tab mới sau khi bạn nhấp chuột. Những cách phổ biến nhất.

Hướng Dẫn Xây Dựng Tabs Với HTML, CSS và Javascript

  • Tác giả: www.thanhlongdev.com
  • Đánh giá: 4 ⭐ ( 2979 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Làm thế nào để mở liên kết trong tab mới trên html?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 7145 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Đặt thuộc tính ‘đích’ của liên kết thành _blank: Link Chỉnh sửa:…

Cách mở một tab mới cho một trang web cụ thể trong trình duyệt của bạn / làm thế nào để

  • Tác giả: vi.phhsnews.com
  • Đánh giá: 4 ⭐ ( 4715 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hầu hết các trình duyệt có một trang mặc định hiển thị khi bạn mở một tab mới. Nếu bạn không muốn trình duyệt của mình quyết định trang web nào bạn nhìn thấy khi mở tab mới, bạn có thể thay đổi trang web đó thành trang web tùy chỉnh do bạn chọn.

Liên kết HTML trong một cửa sổ mới

  • Tác giả: www.rapidtables.org
  • Đánh giá: 5 ⭐ ( 4666 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách mở liên kết trong cửa sổ mới hoặc tab mới.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php