Khung nội tuyến cho phép bạn bao gồm nội dung từ nguồn bên ngoài trên trang của bạn
Khung nội tuyến, thường chỉ được gọi là "iframe", là loại khung duy nhất được phép trong HTML5. Những khung này về cơ bản là một phần trong trang của bạn mà bạn "cắt bỏ". Trong không gian mà bạn đã cắt ra khỏi trang, sau đó bạn có thể ăn trong một trang web bên ngoài. Về bản chất, khung nội tuyến là một cửa sổ trình duyệt khác được đặt ngay bên trong trang web của bạn. Bạn thấy iframe thường được sử dụng trên các trang web cần đưa nội dung bên ngoài như bản đồ Google hoặc video từ YouTube.
Cả hai trang web phổ biến đều sử dụng iframe trong mã nhúng của chúng.
Cách sử dụng phần tử IFRAME
Phần tử này sử dụng các phần tử toàn cầu HTML5 cũng như một số phần tử khác. Bốn cũng thuộc tính trong HTML 4.01:
- —URL cho nguồn của khung
- - chiều cao của cửa sổ
- - chiều rộng của cửa sổ
- - tên của cửa sổ
Và ba tính năng mới trong HTML5:
- srcdoc — HTML cho nguồn của khung. Thuộc tính này được ưu tiên hơn bất kỳ URL nào trong thuộc tính src
- sandbox —một danh sách các tính năng sẽ được cho phép hoặc không được phép trong cửa sổ khung
- liền mạch —thông báo cho người dùng rằng iframe sẽ được hiển thị giống như nó là một phần vô hình của tài liệu gốc
Để xây dựng một iframe đơn giản, bạn đặt URL nguồn và chiều rộng và chiều cao:
Lưu ý rằng bạn có thể chọn không sử dụng giá trị pixel cho cài đặt iframe của mình, nhưng thay vào đó, có thể quyết định sử dụng tỷ lệ phần trăm.
Nếu bạn đang xây dựng một trang web đáp ứng có kích thước thay đổi với kích thước màn hình khác nhau, các tỷ lệ phần trăm này sẽ rất quan trọng.
Cũng có một số thuộc tính hợp lệ trong HTML 4.01 nhưng đã lỗi thời trong HTML5. Vì hầu hết các trang web hiện đang sử dụng HTML5 +, những thuộc tính này là những thuộc tính bạn sẽ không muốn sử dụng (nhưng bạn có thể thấy trong một số tài liệu cũ).
- —instead, sử dụng phần tử A để liên kết đến mô tả
- —instead, sử dụng thuộc tính float CSS
- allowtransparency —instead, sử dụng thuộc tính nền CSS để làm cho ifram trong suốt
- —instead sử dụng thuộc tính CSS đường viền
- marginheight —instead , sử dụng thuộc tính CSS margin
- marginwidth —instead , sử dụng thuộc tính CSS margin
- —instead, sử dụng thuộc tính tràn CSS
Hỗ trợ trình duyệt IFRAME
Phần tử IFRAME được hỗ trợ bởi tất cả các trình duyệt hiện đại:
- Android
- Chrome
- Firefox
- Internet Explorer 2+
- iOS / Safari Mobile
- Netscape 7+
- Opera 3+
- Safari
Nếu không có số phiên bản nào được hiển thị trong danh sách ở trên, đó là do tất cả các phiên bản của trình duyệt đó đều hỗ trợ nó.
Một điều cần lưu ý là trong khi tất cả các trình duyệt đều hỗ trợ phần tử IFRAME, thì vẫn có một số hỗ trợ hạn chế đối với một số tính năng HTML5.
- Sử dụng tràn để tắt cuộn không đáng tin cậy. Nếu bạn không muốn thanh cuộn trên iframe của mình, bạn nên tiếp tục sử dụng thuộc tính cuộn.
- Thuộc tính srcdoc, sandbox và liền mạch không được bất kỳ trình duyệt nào hỗ trợ tại thời điểm này.
Liên kết với Iframe
Khi bạn đặt iframe của bạn một tên hoặc id, bạn có thể trỏ các liên kết của bạn vào khung đó với thuộc tính trên phần tử A. Sau đó, khi người dùng nhấp vào liên kết, nó sẽ mở bên trong iframe được tham chiếu thay vì cửa sổ hiện tại.
Hãy thử nó cho mình. Nhập thông tin sau vào trang web:
Nếu tài liệu được mở trong IFRAME không có bất kỳ mục tiêu nào được đặt, thì tất cả các liên kết đó sẽ mở trong cùng một iframe làm tài liệu gốc .
Bạn có thể sử dụng tính năng này để tạo liên kết trong một IFRAME thay đổi nội dung của một IFRAME khác trên cùng một trang.
IFrame và bảo mật
Chính yếu tố IFRAME không phải là một nguy cơ bảo mật cho bạn hoặc độc giả của bạn.
Thật không may iframes đã nhận được một danh tiếng xấu bởi vì họ có thể được sử dụng bởi các trang web độc hại để bao gồm nội dung có thể lây nhiễm máy tính của khách truy cập mà không nhìn thấy nó trên trang. Điều này được thực hiện bằng cách liên kết trỏ đến IFRAME vô hình và các tập lệnh đó đã đặt mã độc. Người dùng nhấp vào liên kết và cho rằng liên kết bị hỏng vì không có gì xảy ra, nhưng tập lệnh được đặt ở nơi họ không thể nhìn thấy.
Ngoài ra còn có virus máy tính sẽ tiêm một IFRAME vô hình vào các trang web của bạn, biến trang web của bạn thành một botnet. Họ có thể làm điều này thông qua SQL injection và các cuộc tấn công khác.
Điều cần nhớ khi bao gồm IFRAME trên trang web của bạn là người dùng của bạn chỉ an toàn như nội dung của tất cả các trang web mà bạn liên kết đến. Nếu bạn có lý do để cảm thấy một trang web không đáng tin cậy, đừng liên kết với trang web theo bất kỳ thời trang nào và chắc chắn không bao gồm nội dung của nó trong một IFRAME. Tuy nhiên, việc liên kết tới các trang của riêng bạn trong iframe không gây ra rủi ro bảo mật cho bạn hoặc người dùng của bạn.
Bài báo gốc của Jennifer Krynin. Được chỉnh sửa vào ngày 11/7/16 bởi Jeremy Girard