Html mở pdf trong tab mới

Bạn có thành phần này có thể hiển thị nhiều loại tệp. Hạn chế duy nhất là yêu cầu kết nối internet mở

Trân trọng,

Marcelo

Chào Marcelo,

Cảm ơn bạn đã phản hồi.
Tôi đã thấy thành phần 'Trình xem trước web'. Trong các cuộc thảo luận ở trên, tôi đã thấy rằng, một tệp có thể được mở trong iframe bằng cách đưa ra một liên kết. [ do Paulo Zacarias đăng] dán cùng một bài đăng bên dưới để tham khảo.

"

Những gì bạn đang tìm kiếm có thể được thực hiện với tiện ích iFrame mà bạn có thể tìm thấy trong Tiện ích [WebPattern]

Vì vậy, trong màn hình này, bạn mở qua target=_blank, bạn đặt tiện ích iFrame và xác định SourceURL là tệp PDF bạn muốn tải xuống. Tôi tin rằng điều này nên làm việc

Các tab thật tuyệt phải không?

Các tab hiện nay phổ biến đến mức khi bạn nhấp vào một liên kết, có khả năng nó sẽ mở trong một tab mới

Nếu bạn đã từng tự hỏi làm thế nào để làm điều đó với các liên kết của riêng mình, bạn đã đến đúng nơi

Yếu tố mỏ neo

Để tạo một liên kết trên một trang web, bạn cần bọc một phần tử [văn bản, ảnh, v.v.] trong phần tử neo [

Check out freeCodeCamp.

0] và đặt thuộc tính

Check out freeCodeCamp.

1 của phần tử đó thành URL mà bạn muốn liên kết tới

Check out freeCodeCamp.

Kiểm tra freeCodeCamp

Nếu bạn nhấp vào liên kết trên, trình duyệt sẽ mở liên kết trong cửa sổ hoặc tab hiện tại. Đây là hành vi mặc định trong mọi trình duyệt

Để mở một liên kết trong một tab mới, chúng ta cần xem xét một số thuộc tính khác của các thuộc tính khác của phần tử neo

Thuộc tính mục tiêu

Thuộc tính này cho trình duyệt biết cách mở liên kết

Để mở một liên kết trong tab mới, chỉ cần đặt thuộc tính

Check out freeCodeCamp.

2 thành

Check out freeCodeCamp.

3

Check out freeCodeCamp.

Giờ đây, khi ai đó nhấp vào liên kết, nó sẽ mở ra trong một tab mới hoặc có thể là một cửa sổ mới tùy thuộc vào cài đặt trình duyệt của người đó

Mối quan tâm về bảo mật với

Check out freeCodeCamp.

4

Tôi thực sự khuyên bạn luôn thêm

Check out freeCodeCamp.

5 vào phần tử neo bất cứ khi nào bạn sử dụng thuộc tính

Check out freeCodeCamp.

2

Check out freeCodeCamp.

Điều này dẫn đến đầu ra sau

Kiểm tra freeCodeCamp

Thuộc tính

Check out freeCodeCamp.

  

1 đặt mối quan hệ giữa trang của bạn và URL được liên kết. Đặt nó thành

Check out freeCodeCamp.

2 là để ngăn chặn một loại lừa đảo được gọi là tabnabbing

Tabnabbing là gì?

Theo dõi tab, đôi khi được gọi là theo dõi theo tab đảo ngược, là một cách khai thác sử dụng hành vi mặc định của trình duyệt với

Check out freeCodeCamp.

4 để giành quyền truy cập một phần vào trang của bạn thông qua API

Check out freeCodeCamp.

4

Với tính năng theo dõi tab, một trang mà bạn liên kết đến có thể khiến trang của bạn chuyển hướng đến một trang đăng nhập giả mạo. Hầu hết người dùng sẽ khó nhận thấy điều này vì tiêu điểm sẽ nằm trên tab vừa mở – không phải tab gốc có trang của bạn

Sau đó, khi một người quay lại tab có trang của bạn, thay vào đó, họ sẽ thấy trang đăng nhập giả mạo và có thể nhập chi tiết đăng nhập của họ

Nếu bạn muốn tìm hiểu thêm về cách thức hoạt động của tính năng theo dõi tab và những kẻ xấu có thể làm gì với việc khai thác, hãy xem bài viết của Alex Yumashev và bài viết này của OWASP

Nếu bạn muốn xem một ví dụ hoạt động an toàn, hãy xem trang này và kho lưu trữ GitHub của nó để biết thêm thông tin về cách khai thác và thuộc tính

Check out freeCodeCamp.

1

Tóm tắt

Thật dễ dàng sử dụng HTML để mở một liên kết trong một tab mới. Bạn chỉ cần một phần tử neo [

Check out freeCodeCamp.

0] với ba thuộc tính quan trọng

1. Thuộc tính

   Check out freeCodeCamp.

   1 được đặt thành URL của trang bạn muốn liên kết đến
2. Thuộc tính

   Check out freeCodeCamp.

   2 được đặt thành

   Check out freeCodeCamp.

   3, cho phép trình duyệt mở liên kết trong tab/cửa sổ mới, tùy thuộc vào cài đặt của trình duyệt
3. Thuộc tính

   Check out freeCodeCamp.
   
     
   
   

   1 được đặt thành

   Check out freeCodeCamp.

   1 để ngăn chặn các cuộc tấn công độc hại có thể xảy ra từ các trang mà bạn liên kết đến

Một lần nữa, đây là một ví dụ làm việc đầy đủ

Check out freeCodeCamp.

Kết quả nào trong đầu ra sau trong trình duyệt

Kiểm tra freeCodeCamp

Cảm ơn một lần nữa vì đã đọc. Mã hóa vui vẻ

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Kris Koishigawa

Đọc thêm bài viết

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

Bạn có thể tạo một liên kết PDF mở trong một tab mới không?

Làm cách nào để mở PDF trong tab mới trong Javascript?