Frame Là Gì
Trong HTML, frame được dùng khi chúng ta cần nhúng một trang HTML khác vào trang hiện tại. Trang được nhúng sẽ được hiển thị trong một khung hình chữ nhật (hay còn gọi là frame).
Thẻ iframe
Thẻ iframe
(hay inline frame) được dùng để tạo frame:
<iframe src="http://www.hoclaptrinh.org"></iframe>
Thuộc Tính src
Thuộc tính src
của thẻ iframe
chứa địa chỉ URL của trang frame được nhúng.
Bạn có thể sử dụng đường dẫn tương đối cho thuộc tính src
nếu như trang được nhúng có cùng tên miền, giao thức (ví dụ http
), tên miền phụ (ví dụ www
) và cổng (ví dụ 80
) với trang hiện tại.
<iframe src="chat.html"></iframe>
Thuộc Tính width
và height
Hai thuộc tính width
height
được dùng để quy định chiều cao và chiều rộng của khung frame:
<iframe src="chat.html" width="800px" height="600px"></iframe>
Hai thuộc tính này sử dụng đơn vị đo mặc định là pixel (px) vì vậy bạn có thể bỏ ký hiệu đơn vị đo ở phía sau giá trị của hai thuộc tính này.
<iframe src="chat.html" width="800" height="600"></iframe>
Thuộc Tính sandbox
Việc sử dụng iframe có thể ảnh hưởng tới trang hiện ví dụ như các đoạn mã JavaScript của trang iframe sẽ tác động tới trang hiện tại.
Phiên bản HTML5 giới thiệu thuộc tính sandbox
giúp tăng cường bảo mật cho trang hiện tại khi nhúng iframe từ trang web khác:
<iframe sandbox src="http://example.com/"></iframe>
Việc thêm thuộc tính sandbox
như ở trên sẽ giới hạn trang iframe không thể chạy mã JavaScript khi nhúng vào trang hiện tại, vô hiệu hoá việc gửi dữ liệu sử dụng form biểu mẫu, không cho phép mở cửa sổ popup...
Để cho phép các đoạn mã của trang iframe chạy trang hiện tại, bạn cần thêm giá trị allow-scripts
cho thuộc tính sandbox
:
<iframe sandbox="allow-scripts" src="http://example.net/"></iframe>
Để cho phép người dùng có thể gửi biểu mẫu trong trang iframe, bạn cần thêm giá trị allow-forms
cho thuộc tính sandbox
:
<iframe sandbox="allow-forms" src="http://example.net/"></iframe>