Trong bài này, chúng ta sẽ biết được khái niệm của iFrame là gì? Cách sử dụng iFrame và những điều đáng lưu ý về Frame trước khi bạn thực sự đưa iFrame vào trong HTML document. Show iFrame là gì?Một iFrame là một frame bên trong frame. Nó là thành phần của một HTML element (tag HTML) giúp bạn đính kèm/nhúng tài liệu HTML, videos. Và các video vào trong một trang web, hay vào trong bài viết. Bằng cách sử dụng iFrame, bạn đã tải thông tin. Nội dung từ một web bên ngoài lên trang web của bạn. Vậy, có thể xem iFrame là một phần của nội dung web. Chứ không phải là một phần của thiết kế giao diện website. Ví dụ, bạn muốn thêm một Youtube video để mô tả rõ hơn cho người đọc. Bạn có thể thêm iFrame vào bên trong bài viết. iFrame có thể tích hợp mọi nội dung từ bất kỳ vị trí nào trong trang web. Chính vì vậy, ta không phải đưa nó vào bố cục chính như các thành phần truyền thống. Dù vậy, bạn không nên sử dụng iFrame quá nhiều. Nó có thể làm chậm trang web của bạn và tạo ra lỗ hổng bảo mật. Đặc biệt khi bạn nhúng nội dung từ các trang web không an toàn. Hãy xem nội dung của iFrame là nội dung của chính website mà cẩn thận chọn lựa chúng. Về vấn đề bảo mật của iFrameTheo lý thuyết, yếu tố iFrame không tạo ra lỗ hổng bảo mật trên web page của bạn hoặc rủi ro cho người đọc. Mà chỉ đơn giản như việc người đọc xem qua 2 trang web cùng lúc. Một phần là vì nó được thiết kế để làm rõ nội dung, để giúp bạn tương tác với người đọc hiệu quả hơn. Nhưng bạn tuyệt đối phải chú ý khi thêm iFrame, hãy xem kỹ xem site nguồn có an toàn hay không, và chỉ thêm iFrame từ site bạn tin tưởng vì người đọc có thể tương tác với website khác thông qua iFrame của bạn. Việc tấn công thông qua chèn mã độc trong iFrame đã tăng lên, đặc biệt là trên những website danh tiếng. Như là ABC news năm 2008. Cuộc tấn công hướng người dùng tới một site độc hại và khiến họ cài đặt virus vào máy tính để đánh cắp thông tin nhạy cảm. Đó cũng chính là lý do vì sao iFrame không được trở thành một phần chính trong bố cục của website. Nếu bạn thấy một website đáng ngờ hay có cảm giác nó không an toàn, đừng link tới nó làm gì, và đừng sử dụng iFrame để lấy nội dung của nó. Tóm lạiDù sao chăng nữa, iFrame vẫn là một công cụ mạnh để bạn tiếp cận tốt hơn với người đọc. Bạn cần xem iFrame là một phần của nội dung chứ không phải là thành phần chính tạo nên trang web. Bạn cũng không nên sử dụng iFrame quá nhiều vì nó có thể làm chậm website của bạn; và sẽ tốt hơn nếu bạn thiết kế một website không có iFrame. Nếu bạn cần sử dụng nó cho mục đích thiết kế và phát triển web, hãy nhớ sử dụng nguồn đáng tin cậy. Chúng tôi hy vọng bài này có thể giúp bạn hiểu iFrame là gì và triển khai nó thật hiệu quả. Nếu có thắc mắc hoặc ý kiến gì, đừng ngại hãy cho chúng tôi biết ngay từ phần bình luận nhé.
?? MINARA– GIẢI PHÁP MARKETING HÀNG ĐẦU CHO DOANH NGHIỆP ? Địa chỉ: ☎ Hotline: 09.7777.1060 Liên lạc ngay với chúng tôi hoặc để lại thông tin của bạn, bộ phận tư vấn của MINARA sẽ liên lạc lại ngay để giải đáp mọi thắc mắc! iFrame trong HTML là gì? Và được áp dụng như thế nào để đem lại sự hiệu quả trong quá trình code. Trong bài viết này, Vietnix sẽ giới thiệu và đưa ra các ví dụ cụ thể giúp bạn dễ hiểu hơn về các thuộc tính và cách sử dùn iFrame trong HTML Nội dung
Giới thiệu về thẻ iFrame trong HTMLThẻ iFrame trong HTML là những inline frames được sử dụng để chèn một HTML Document bên trong một HTML Document khác. IFrame được sử dụng rộng rãi trong quá trình thiết kế website để chèn nội dung trực tiếp vào trang web từ các nguồn khác như nội dung quảng cáo, các control panel điều khiển,… iFrame trong HTML là gì?Hầu hết các nhà thiết kế web sử dụng iFrame để thể hiện các ứng dụng tương tác trên trang các trang web. Điều này có thể thực hiện được bằng cách sử dụng JavaScript hoặc bằng cách sử dụng thuộc tính “target” trong HTML. >> Xem thêm: HTML là gì? Cấu trúc HTML như thế nào? Mục đích chính của iFrame là dùng để hiển thị một website bên trong một website khác thông qua việc sử dụng thẻ có tên gọi <iframe>. Nó hoạt động như một block hình chữ nhật được chèn trong website của bạn và browser sẽ hiển thị nội dung của website khác trong đó, bao gồm cả phần thanh trượt (scrollbar) để người dùng có thể tương tác với website được chèn vào. Cú pháp để sử dụng iFrame trong HTMLĐể sử dụng iFrame trong HTML, có thể sử dụng như sau:
Ví dụ:
Cũng có thể chèn thêm các thuộc tính như chiều cao (height), chiều rộng (width) cho iframe (theo đơn vị pixel) bằng cú pháp:
Với cú pháp trên, iframe sẽ được chèn vào nhưng được quy định rõ chiều cao và chiều rộng của frame. Ví dụ:
Ngoài ra chúng ta cũng thể khai báo chiều cao và chiều rộng của iframe bằng cách khai báo các giá trị của CSS bằng cú pháp:
Mọi thứ hoạt động tương tự như cách bạn chèn iframe thông thường, chỉ thay đổi ở cách chúng ta khai báo giá trị cho iframe. Ví dụ:
Bằng cách sử dụng CSS, chúng ta có thể sử dụng iframe một cách linh hoạt hơn như thay đổi kích thước của border, khai báo màu sắc cho border,… iframe cũng có thể sử dụng như Target cho một link bằng cách sử dụng cú pháp:
Với cú pháp trên, src là một URL như bình thường; ở đây, thuộc tính target của link sẽ tham chiếu đến thuộc tính name trong iframe của chúng ta. Ví dụ:
Các thuộc tính của iFrameCó rất nhiều thuộc tính (tags) hữu ích khi sử dụng thẻ iframe trong HTML:
Tóm tắt một số thuộc tính cơ bản của thẻ
Ví dụ về thẻ <iframe> trong HTMLDưới đây là một số ví dụ về sử dụng iframe trong HTML, các ví dụ sẽ được giải thích chi tiết bên dưới: Thuộc tính width và heightHãy xem xét một ví dụ mà chúng ta sẽ trình bày cách tạo iframe với chiều cao và chiều rộng cụ thể.
Kết quả: Sử dụng thẻ iframe trong HTMLThuộc tính width và height thông qua CSSHãy xem xét một ví dụ khác mà Vietnix sẽ trình bày cách tạo iFrame với chiều cao và chiều rộng cụ thể. Nhưng trong ví dụ này, chúng ta đang chỉ định chiều cao và chiều rộng thông qua CSS. Ở đây chúng ta có thể thấy scrollbar đang được điều chỉnh theo kích thước nội dung.
Kết quả: Demo ví dụ về thuộc tính width & height thông qua CSSThuộc tính borderỞ đây chúng ta đang xem xét một ví dụ mà chúng ta sẽ thêm border vào iFrame bằng cách thêm một số thuộc tính CSS bổ sung để hiển thị sự thay đổi về kích thước, màu sắc của border,… Vì vậy, chúng ta có thể thêm nhiều style cho iFrame của chúng ta. Code:
Kết quả: Demo ví dụ về thuộc tính border của iframe trong HTMLThuộc tính targetHãy xem xét một ví dụ khác mà chúng ta sẽ trình bày cách thuộc tính target để mở một liên kết của một trang web bằng cách sử dụng iFrame.
Kết quả: Thuộc tính target của iframe trong HTMLTarget output: Ví dụ như hình trên, khi chúng ta nhấp vào liên kết sẽ mở trang web tiếp theo được hiển thị bên dưới Output của thuộc tính TargetThuộc tính sanboxThuộc tính sanbox thường dùng để hạn chế một số tính năng của trang web khi nhúng vào. Một số tính năng bị hạn chế như:
Tuy nhiên, chúng ta có thể thêm các giá trị thuộc tính sanbox đẻ kích hoạt lại những tính năng bạn không mượn chặn. Giá trị thuộc tínhMô tảallow-formsCho phép submit formallow-scriptsCho phép thực thi mã lệnh JavaScriptallow-popupsCho phép mở thêm những liên kết có thuộc tính target=”_blank”allow-pointer-lockKích hoạt các APITổng kết về việc sử dụng thẻ iFrame trong HTML Thông tin trên giúp ta có thể kết luận rằng iFrame là một frame nội tuyến bao gồm một tài liệu HTML khác vào chính nó. IFrame được coi là phần tử HTML mạnh mẽ nhất cho mục đích thiết kế web. Với sự trợ giúp của iFrame, bạn cũng có thể thêm một số nội dung từ một nguồn khác. Có thể sử dụng các loại thuộc tính HTML khác nhau như thuộc tính “Global Attributes”, Thuộc tính sự kiện “Event Attributes”, một số trang liên quan,… Lời kếtQua bài viết iFrame trong HTML trên của Vietnix, giúp bạn hiểu rõ và cách sử dụng iFrame hiệu quả hơn. Nếu có bất kỳ thắc mắc nào bạn có thể để lại bình luận phía dưới đây. Chia sẻ bài viết Đánh giá 5/5 - (1 bình chọn) Nguyễn Hưng Kết nối với mình qua Mình là Bo - admin của Quản Trị Linux. Mình đã có 10 năm làm việc trong mảng System, Network, Security và đã trải nghiệm qua các chứng chỉ như CCNP, CISSP, CISA, đặc biệt là chống tấn công DDoS. Gần đây mình trải nghiệm thêm Digital Marketing và đã hòan thành chứng chỉ CDMP của PearsonVUE. Mình rất thích được chia sẻ và hỗ trợ cho mọi người, nhất là các bạn sinh viên. Hãy kết nối với mình nhé! |