Thẻ HTML `iframe`

Khám phá những điều cơ bản về cách làm việc với HTMLiframenhãn

Cáciframecho phép chúng tôi nhúng nội dung đến từ các nguồn gốc khác (các trang khác) vào trang web của chúng tôi.

Về mặt kỹ thuật, iframe tạo ra một bối cảnh duyệt web lồng nhau mới. Điều này có nghĩa là bất kỳ thứ gì trong iframe không can thiệp vào trang mẹ và ngược lại. JavaScript và CSS không “rò rỉ” đến / từ iframe.

Nhiều trang web sử dụng iframe để thực hiện nhiều thứ khác nhau. Bạn có thể quen thuộc với Codepen, Glitch hoặc các trang web khác cho phép bạn viết mã trong một phần của trang và bạn thấy kết quả trong một hộp. Đó là một iframe.

Bạn tạo một cái theo cách này:

<iframe src="page.html"></iframe>

Bạn cũng có thể tải một URL tuyệt đối:

<iframe src="https://site.com/page.html"></iframe>

Bạn có thể đặt một tập hợp các thông số chiều rộng và chiều cao (hoặc đặt chúng bằng cách sử dụng CSS), nếu không iframe sẽ sử dụng giá trị mặc định, một hộp 300x150 pixel:

<iframe src="page.html" width="800" height="400"></iframe>

Srcdoc

Cácsrcdoccho phép bạn chỉ định một số HTML nội tuyến để hiển thị. Nó là một sự thay thế chosrc, nhưng gần đây và không được hỗ trợ trong Edge 18 trở xuống và trong IE:

<iframe srcdoc="<p>My dog is a good dog</p>"></iframe>

Hộp cát

Cácsandboxthuộc tính cho phép chúng tôi giới hạn các hoạt động được phép trong iframe.

Nếu chúng tôi bỏ qua nó, mọi thứ đều được phép:

<iframe src="page.html"></iframe>

Nếu chúng tôi đặt nó thành “”, không có gì được phép:

<iframe src="page.html" sandbox=""></iframe>

Chúng tôi có thể chọn những gì để cho phép bằng cách thêm các tùy chọn trongsandboxthuộc tính. Bạn có thể cho phép nhiều cái bằng cách thêm một khoảng trắng ở giữa. Dưới đây là danh sách không đầy đủ các tùy chọn bạn có thể sử dụng:

  • allow-forms: cho phép gửi biểu mẫu
  • allow-modalscho phép mở cửa sổ phương thức, bao gồm cả gọialert()trong JavaScript
  • allow-orientation-lockcho phép khóa hướng màn hình
  • allow-popupscho phép cửa sổ bật lên, sử dụngwindow.open()target="_blank"liên kết
  • allow-same-origincoi tài nguyên đang được tải là cùng nguồn gốc
  • allow-scriptscho phép iframe đã tải chạy các tập lệnh (nhưng không tạo cửa sổ bật lên).
  • allow-top-navigationcấp quyền truy cập vào iframe cho ngữ cảnh duyệt cấp cao nhất

Cho phép

Hiện đang thử nghiệm và chỉ được hỗ trợ bởi các trình duyệt dựa trên Chromium, đây là tương lai của chia sẻ tài nguyên giữa cửa sổ mẹ và iframe.

Nó tương tự nhưsandboxnhưng cho phép chúng tôi cho phép các tính năng cụ thể, bao gồm:

  • accelerometercấp quyền truy cập vào giao diện Cảm biến API Accelerometer
  • ambient-light-sensorcấp quyền truy cập vào giao diện AmbientLightSensor của API cảm biến
  • autoplaycho phép tự động phát các tệp video và âm thanh
  • cameracho phép truy cập máy ảnh từAPI getUserMedia
  • display-capturecho phép truy cập nội dung màn hình bằng API getDisplayMedia
  • fullscreencho phép truy cập chế độ toàn màn hình
  • geolocationcho phép truy cập vàoAPI vị trí địa lý
  • gyroscopecấp quyền truy cập vào giao diện Con quay hồi chuyển API cảm biến
  • magnetometercấp quyền truy cập vào giao diện Magnetometer API cảm biến
  • microphonecấp quyền truy cập vào micrô của thiết bị bằng API getUserMedia
  • midicho phép truy cập vào API MIDI trên web
  • paymentcấp quyền truy cập vào API yêu cầu thanh toán
  • speakercho phép truy cập để phát âm thanh qua loa của thiết bị
  • usbcấp quyền truy cập vào API WebUSB.
  • vibratecấp quyền truy cập vào API rung
  • vrcấp quyền truy cập vào API WebVR

Người giới thiệu

Khi tải một iframe, trình duyệt sẽ gửi cho nó thông tin quan trọng về người đang tải nó trongReferertiêu đề (chú ý đơnr, một lỗi chính tả mà chúng ta phải sống chung với).

The misspelling of referrer originated in the original proposal by computer scientist Phillip Hallam-Baker to incorporate the field into the HTTP specification. The misspelling was set in stone by the time of its incorporation into the Request for Comments standards document RFC 1945

Cácreferrerpolicycho phép chúng tôi đặt liên kết giới thiệu để gửi đến iframe khi tải nó. Liên kết giới thiệu là một tiêu đề HTTP cho phép trang biết ai đang tải nó. Đây là những giá trị được phép:

  • no-referrer-when-downgradeđó là mặc định và gửi liên kết giới thiệu khi trang hiện tại được tải qua HTTPS và iframe tải trên giao thức HTTP
  • no-referrerkhông gửi tiêu đề liên kết giới thiệu
  • originliên kết giới thiệu được gửi và chỉ chứa nguồn gốc (cổng, giao thức, miền), không chứa điểm gốc + đường dẫn là mặc định
  • origin-when-cross-originkhi tải từ cùng một điểm gốc (cổng, giao thức, miền) trong iframe, liên kết giới thiệu được gửi ở dạng hoàn chỉnh (điểm gốc + đường dẫn). Nếu không, chỉ có nguồn gốc được gửi
  • same-originliên kết giới thiệu chỉ được gửi khi tải từ cùng một nguồn gốc (cổng, giao thức, miền) trong iframe
  • strict-origingửi nguồn gốc dưới dạng liên kết giới thiệu nếu trang hiện tại được tải qua HTTPS và iframe cũng tải trên giao thức HTTPS. Không gửi gì nếu iframe được tải qua HTTP
  • strict-origin-when-cross-origingửi điểm gốc + đường dẫn dưới dạng liên kết giới thiệu khi làm việc trên cùng một điểm gốc. Gửi nguồn gốc dưới dạng liên kết giới thiệu nếu trang hiện tại được tải qua HTTPS và iframe cũng tải trên giao thức HTTPS. Không gửi gì nếu iframe được tải qua HTTP
  • unsafe-url: gửi điểm gốc + đường dẫn dưới dạng liên kết giới thiệu ngay cả khi tải tài nguyên từ HTTP và trang hiện tại được tải qua HTTPS

Tải xuống miễn phí của tôiSổ tay HTML


Các hướng dẫn html khác: