Mã sẽ mở trong một cửa sổ mới. Cách mở liên kết trong cửa sổ mới

Bài viết chỉ ra các nguyên tắc cơ bản khi sử dụng thuộc tính target="_blank" và cũng gợi ý một phương án thay thế cho việc sử dụng thuộc tính này, trong đó mã sẽ vẫn hợp lệ.

Một thực tế khá phổ biến là khi nhấp vào liên kết sẽ đưa bạn đến trang đích trong tab trình duyệt mới. Kỹ thuật này thường được sử dụng khi chỉ định nhà phát triển tài nguyên web hoặc câu trả lời cho truy vấn trong công cụ tìm kiếm. Kỹ thuật này đạt được thông qua việc sử dụng thuộc tính đích của thẻ. Dưới đây là một ví dụ mã:

HTML

< a href= "#" target= "_blank" >

Theo cách hiểu hiện tại về bố cục phù hợp hiện đại và sự tương tác của người dùng với chức năng của tài nguyên, người ta thường chấp nhận rằng khách truy cập phải tự xác định chính xác cách mình sẽ theo liên kết. Ý kiến ​​​​tương tự này được hỗ trợ bởi các nhà phát triển web nổi tiếng và có kinh nghiệm. Ngoài ra, việc sử dụng thuộc tính này sẽ làm gián đoạn hoạt động của nút “Quay lại” của trình duyệt - đây cũng được coi là tác động tiêu cực của thuộc tính. Các yếu tố được liệt kê có thể gây ra sự phẫn nộ của người truy cập trang web.

Một số giải thích việc sử dụng thuộc tính đích là do khi sử dụng nó, ngay cả khi người dùng tìm thấy thứ mình đang tìm kiếm trên một tài nguyên khác (liên kết đã được gửi đến), sau khi đóng tab mới mở, anh ta sẽ quay lại trang web trước đó. Điều này được cho là làm tăng khả năng chuyển đổi một khách truy cập bình thường thành người dùng thông thường. Tuyên bố này là sai! Bạn chỉ có thể giành được sự chú ý thường xuyên của người dùng bằng nội dung thú vị và chất lượng cao. Thật vô ích khi thông tin được coi là một trong những tài nguyên có giá trị nhất.

Ngoài ra, theo đặc tả nghiêm ngặt của XHTML 1.0, việc sử dụng thuộc tính đích là bất hợp pháp. Nếu không, mã sẽ không được coi là hợp lệ. Và chính trình xác thực sẽ hiển thị thông báo sau:

Như đã đề cập trước đó, việc sử dụng thuộc tính đích để theo liên kết trong cửa sổ trình duyệt mới không nằm trong thông số kỹ thuật và không được coi là giải pháp hợp lệ cho vấn đề. Tuy nhiên, đây không phải là cách duy nhất để giải quyết vấn đề. Hiệu ứng tương tự có thể đạt được bằng cách sử dụng mã js.

Nguyên tắc tổ chức quá trình như vậy dựa trên sự kiện onclick. Trong giá trị của sự kiện này, một hàm sẽ được viết để mở tab trình duyệt mới - window.open() , cũng như một trình chặn sẽ hủy quá trình chuyển đổi sang địa chỉ mong muốn trong cửa sổ hiện tại - return false . Trong mã, tất cả các hành động này sẽ trông như thế này:

< a href= "#" onclick= "window.open(this.href); return false" >Liên kết mở trong tab mới

Để xác minh tính hiệu quả của phương pháp được đề xuất, bạn có thể nhấp vào liên kết này, nó sẽ mở trong một cửa sổ mới.

Sau khi bị thuyết phục về tính hiệu quả của phương pháp, chúng tôi sẽ kiểm tra tính hợp lệ của mã. Trình xác thực đưa ra một thông báo màu xanh lục, cho biết mã của chúng tôi hoàn hảo.

Thoạt nhìn, chúng tôi đã đạt được giải pháp hợp lý cho vấn đề, nhưng khi kiểm tra chi tiết phương pháp, hóa ra nếu trình duyệt có trình chặn cửa sổ bật lên, phương pháp sẽ ngừng hoạt động. Thay vì nhấp vào liên kết, một thông báo chặn cửa sổ bật lên sẽ xuất hiện.

Chức năng nêu trên được thiết kế để giúp người dùng giảm bớt quảng cáo dư thừa trên Internet. Tất cả các trình duyệt hiện đại đều có khả năng này trong kho vũ khí của chúng và một số trình duyệt có thể chặn ở các cấp độ khác nhau. Ví dụ: tất cả các phiên bản Opera, bắt đầu từ ngày 9, chỉ có khả năng chặn các cửa sổ được đánh dấu hoặc tất cả chúng.

Mặc dù có lẽ có rất ít người dùng cài đặt trình chặn cửa sổ bật lên trong trình duyệt của họ nhưng chúng vẫn tồn tại. Và chúng ta phải tính đến tất cả các tùy chọn có thể có để trang web hoạt động bình thường. Hãy để tôi nhắc bạn rằng nếu có khối, liên kết trong mã js của chúng tôi sẽ ngừng hoạt động.

Vậy thì bạn nên đưa ra lựa chọn nào: mã không hợp lệ hoặc các liên kết không phải lúc nào cũng hoạt động? Không có lựa chọn nào phù hợp với chúng tôi. Một giải pháp thay thế đến từ việc thử nghiệm một liên kết có bật thuộc tính đích và trình chặn cửa sổ bật lên. Trong các điều kiện nhất định, liên kết đã mở nhưng chỉ trong cửa sổ riêng của nó. Điều này có nghĩa là chúng ta cần sửa đổi mã js của mình để khi bị chặn, liên kết sẽ hoạt động trong cửa sổ hiện tại. Điều này được thực hiện như sau:

< a href= "#" onclick= "return !window.open(this.href)" >Liên kết mở trong tab mới

Nguyên lý hoạt động của phương pháp hầu như không thay đổi, nhưng hình thức giải thích các hành động đã thay đổi. Trong mã mới, hàm window.open() đánh giá là true nếu khóa chưa được cài đặt, nhưng nếu có, hàm sẽ đánh giá là false . Nói bằng tiếng Nga, nếu bạn đặt cài đặt thích hợp trong trình duyệt, liên kết sẽ mở trong phiên hiện tại, nếu không thì - trong một tab mới.

Thử nghiệm giải pháp sửa đổi cho liên kết tới blog chính.

Dựa trên thông tin được trình bày ở trên, chúng ta có thể kết luận rằng cách hợp lý nhất để buộc các liên kết mở trong tab mới là sử dụng phương pháp thứ hai, dựa trên mã JavaScript.

Tuy nhiên, đồng thời, những thứ như vậy nên được sử dụng cẩn thận, vì điều này áp đặt một số hành động nhất định lên người dùng và hạn chế quyền tự do đưa ra quyết định của họ. Đây được coi là cách cư xử không tốt.

Biểu thức mở liên kết trong cửa sổ mới trong bài viết này có nghĩa là các liên kết sẽ mở trong tab hoặc cửa sổ mới, tùy thuộc vào cài đặt trình duyệt của bạn. Trong mọi trường hợp, giả định rằng trang mà liên kết được nhấp vào sẽ vẫn mở.

Tại sao điều này có thể cần thiết? Khách truy cập hiện đang ở trên trang web của bạn và có một liên kết bên ngoài trong bài viết hoặc trên trang của trang web. Nếu liên kết này được khách truy cập quan tâm theo một cách nào đó, thì sau khi nhấp vào liên kết bên ngoài đó, anh ta sẽ được đưa đến một trang web khác.

Trên một trang web khác, anh ta có thể mở thêm một vài trang nữa và sau đó anh ta sẽ khó truy cập lại trang web của bạn. Anh ấy chưa đọc xong bài viết của bạn và không phải người dùng máy tính nào cũng hiểu ngay cách quay lại trang web của bạn, bởi vì mọi người có nền tảng khác nhau và không phải lúc nào người mới bắt đầu cũng rõ ràng phải làm gì trong trường hợp này.

Trong trình duyệt, bạn có thể nhấp vào nút quay lại, nhưng khách truy cập thậm chí có thể đóng cửa sổ trên một trang web khác, nhưng anh ta muốn đọc xong bài viết của bạn chứ không phải bài viết mà anh ta vô tình xem qua một liên kết bên ngoài.

Bạn có thể mở một liên kết trong tab trình duyệt mới bằng cách chèn thủ công thuộc tính “target” với giá trị thẻ “_blank” vào mỗi liên kết đó . Trong HTML nó sẽ trông như thế này - mục tiêu=”_blank”. Nhưng có thể có rất nhiều liên kết như vậy và không phải lúc nào bạn cũng nhớ được những liên kết bên ngoài nào chưa được chèn thuộc tính này.

Khi thêm liên kết và hình ảnh mới vào một bài viết, trong bảng quản trị WordPress, trong trình soạn thảo văn bản, có các mục tương ứng, việc kích hoạt chúng cho phép bạn mở các liên kết và hình ảnh đã thêm trong một cửa sổ mới.

Có một số cách để mở liên kết trong cửa sổ mới. Trong bài viết này tôi sẽ chỉ mô tả những phương pháp hoạt động trên trang web của tôi.

Một số phương pháp không hoạt động chính xác trên trang web của tôi trong mẫu trước, vì vậy tôi sẽ không nói về chúng. Đặc biệt, trang chính được hiển thị không chính xác theo phương thức yêu cầu đưa vào thư viện JavaScript - jQuery. Ngoài ra, phương pháp này sẽ không hoạt động nếu JavaScript bị tắt.