iFrame là gì? Cách chèn bản đồ Google vào bài viết web miễn phí

iFrame là gì?

iFrame viết tắt của Inline Frame là thành phần của HTML element giúp bạn nhúng tài liệu, videos,... 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. iFrame không phải là một phần của thiết kế giao diện website.

iFrame mang đến khả năng tích hợp thông tin từ nguồn khác lên website một cách hiệu quả.

Bạn muốn tìm cách thêm một video Youtube vào web để 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.

Tuy nhiê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.

Hướng dẫn cách sử dụng iFrame chèn bản đồ

Giờ bạn đã biết iFrame là gì. Bạn có thể chèn iFrame để bổ sung chất lượng cho bài viết đó. Để thêm iFrame, hãy sử dụng tag <iframe> trong trang HTML. Sau đây là bài hướng dẫn bạn cách chèn bản đồ vào bài viết website. Chúng ta sẽ lấy địa điểm Tháp Bitexco Financial Tower làm ví dụ.

Đăng nhập gmail vào Google My Maps.

Tại đây bạn thay đổi tên lớp và tên bản đồ của bạn. 

Tại đây ta đổi thành "My maps".

Chọn địa điểm Tháp Bitexco Financial Tower

Tại dấu 3 chấm mở rộng, chọn "Nhúng vào trang web của tôi".

Ở đây có thể bạn sẽ gặp lỗi chia sẻ.  Bạn quay lại tab chia sẻ để cài đặt công khai.

Quay trở lại tùy chọn "Nhúng vào trang web của tôi" bạn sẽ có đoạn code <iframe> như hình. Chỉ cần thêm đoạn code này vào bài viết là bạn đã nhúng được bản đồ.

Như vậy bạn có thể áp dụng kỹ thuật này để thêm địa điểm doanh nghiệp của mình lên website. Ví dụ dưới đây ta sẽ thêm bản đồ nhà cung cấp dịch vụ thuê hosting Mắt Bão chi nhánh Hà Nội vào bài viết này.

Ý nghĩa của tab <iframe> là gì?

Ví dụ, bạn có thể copy đoạn code sau và dán nó vào notepad, lưu dưới dạng file .html:

1. <iframe height="450" src="https://www.google.com/maps/d/u/0/embed?mid=1904s7xOOUzIiGmZGjVuUrsLpL9ffExlB" width="600"></iframe>

Hãy xem qua các tag có ý nghĩa gì nhé:

• <iframe>…</iframe> tag được dùng để chứa video bên trong iFrame.
• Nguồn của iFrame (src) là phần nội dung gốc từ server bên ngoài (hoặc server nội bộ khác). Nguồn URL này phải được đặt trong dấu ngoặc kép.
• Width và height là chiều rộng và cao của iFrame. Bạn có thể thêm kích thước mặc định như là 680×480 pixels (px) trong ví dụ. Hoặc, bạn có thể sử dụng số phần trăm (10%-100%) để tự chỉnh kích thước iFrame tự động.

Vấn đề bảo mật của iFrame là gì?

Theo lý thuyết, iFrame không tạo ra lỗ hổng bảo mật trên web page. Nó 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? 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.

Hy vọng bài viết này đã cung cấp cho bạn nền tảng kiến thức "iFrame là gì?". Cũng như hướng dẫn bạn cách thêm bản đồ Google vào bài viết website thành công!