Một trong những cách làm cho WordPress của bạn trở nên sinh động và hoạt động hiệu quả hơn – đó chính là nhờ đến iframe .
Iframe là gì?
Iframe (inline iframe) là khung nội tuyến – thành phần thẻ tag để người dùng nhúng một trang HTML khác gồm có hình ảnh, video, hay thậm chí là một trang web khác vào frame của WordPress. Ngoài ra, tài liệu HTML sẽ có thể chứa Javascript hoặc CSS. Nói một cách dễ hiểu là một frame được chèn vào trong một frame khác. Giống như việc bạn thấy một đoạn nhạc quảng cáo của Youtube ở một trang khác không phải Youtube vậy. Đó là một ví dụ dễ hiểu của iframe.
Một mã nhúng iframe thường sẽ có code như sau:
1 <iframe width = "450" height = "265" src = "//www.youtube.com/embed/qzOOy1tWBCg?rel=0" frameborder = "0" allowfullscreen></iframe> Trong đó:
- <iframe>…</iframe>: tag được dùng để chứa các nội dung nhúng bên trong iframe, cụ thể ở ví dụ trên là video.
- Nguồn của iframe (src): 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: chiều rộng và cao của iframe. Có hai cách để bạn cài đặt kích thước: một là thêm mặc định như ví dụ trên hoặc sử dụng phần trăm (10 – 100%) để điều chỉnh tự động.
- Frameborder: kích thước viền khung của thẻ nhúng mà bạn muốn thêm.
7 điều bạn nên biết về iframe
Các thuộc tính của iframe
Iframe có rất nhiều thuộc tính từ cơ bản đến nâng cao và các thuộc tính này không nhất thiết phải cùng xuất hiện trong một mã nhúng. Tuy nhiên, thường các code iframe sẽ có khoảng năm thuộc tính cơ bản sau:
- Src (source): thuộc tính nguồn, khai báo đường dẫn của tài liệu, trang web mà bạn muốn nhúng.
- Width: thuộc tính khai báo chiều rộng của iframe (đơn vị là pixel hoặc %).
- Height: thuộc tính khai báo chiều cao của iframe (đơn vị là pixel hoặc %).
- Name: thuộc tính khai báo cho tên gọi của iframe.
- Frameborder: thuộc tính khai báo viền cho iframe. (0: ẩn đường viền, 1: hiện đường viền). Nếu như không khai báo thì thuộc tính này sẽ luôn là một.
Công dụng của iframe
Iframe sẽ giúp trang web bạn tối ưu hóa SEO và gia tăng tỷ lệ truy cập, time-on-site cho website. Từ đó, khách hàng sẽ chú ý nhiều hơn đến thương hiệu của bạn. Vì thế, iframe nên được các nhà viết web xem như là một phần nội dung không thể thiếu hơn là một thiết kế giao diện cần có.
Ưu nhược điểm của iframe
Việc khách hàng có thể truy cập và tương tác với các thẻ nhúng khác trên chính WordPress của bạn, sẽ có những ưu điểm như sau:
- Hạn chế ảnh hưởng đến tốc độ tải server và website.
- Hiển thị đa dạng các quảng cáo được nhúng một cách tự do các nội dung trực quan.
- Thuận tiện thiết kế các nội dung nhúng trên trang web của mình.
- Hoạt động một cách an toàn vì người xem không có quyền truy cập vào mã gốc.
Bên cạnh những ưu điểm mà iframe mang lại, song vẫn còn một số hạn chế nhất định. Đó là:
- Ảnh hưởng nghiêm trọng đến bảo mật website nếu liên kết với các trang độc hại.
- Iframe có thể làm chậm web và không quá lý tưởng cho việc tối ưu hóa công cụ tìm kiếm.
- Kén thiết bị hỗ trợ.
Bởi vì những bất cập của iframe cũng là không nhỏ, thế nên người dùng cần tìm hiểu những lưu ý khi sử dụng cũng như là hiểu rõ khi nào chúng ta mới thực sự cần đến iframe.
Những lưu ý khi dùng iframe
Vấn đề bảo mật
Việc nhúng nhiều trang HTML để tạo các cửa hàng độc lập (multiple view) sẽ giúp cho trang web của bạn trở nên nhiều thông tin, kiến thức và đa dụng hơn. Tuy nhiên, đồng thời việc làm này sẽ dẫn đến tình trạng mất kiểm soát. Bạn thực sự sẽ rất khó để rà soát được mã độc trong các thẻ nhúng nếu có. Và việc nhúng các hình ảnh, video,… có chứa mã độc sẽ làm thay đổi thông tin website bạn, nặng hơn nữa sẽ đánh cắp thông tin người dùng và mất uy tín website. Từ đó, một số lượng lớn khách hàng bị hao hụt.
Khả năng tối ưu hóa công cụ tìm kiếm
Khi bạn nhúng iframe vào website mình với nhiều nội dung khác nhau, Google Search Bots sẽ dẫn người truy cập đến trực tiếp các trang web đó thay vì website của bạn. Điều này sẽ ảnh hưởng không nhỏ đến lượt truy cập của website. Dần dần trang web bạn sẽ giảm trên bảng xếp hạng và đây là điều mà bất kỳ doanh nghiệp nào cũng không muốn xảy ra.
Những trường hợp bất đắc dĩ nên dùng iframe
Khi đây là sự lựa chọn duy nhất mà bạn có
Vì sự an toàn của website, bạn không nên mạo hiểm nhúng iframe một cách vô tội vạ. Bạn chỉ nhúng những iframe từ những trang web uy tín và chất lượng. Đối với các hình ảnh, video đến từ các mạng xã hội lớn như Facebook, Instagram, Zalo, Youtube…bạn có thể dẫn trực tiếp theo cơ chế sẵn có thay vì thông qua iframe để có thể giảm thiểu được rủi ro. Và hãy nhớ kiểm tra kỹ các mã nhúng trước khi đưa vào website của mình.
Truyền thông đa phương tiện
Để nguồn nhúng iframe được đảm bảo, bạn nên có kế hoạch truyền thông đa phương tiện hiệu quả. Việc này sẽ tránh được các tổn thất liên quan đến SEO mà còn tạo nên sự thống nhất trong chiến dịch truyền thông của công ty.
Tương tác giữa iframe và main page
Cú pháp iframe: <iframe src=”http://“></iframe>
Config iframe page: Để các trang nhúng iframe được chấp nhận tại các trang web chính, bạn cần có thêm config này trong file: config/application.rb
Iframe config có hai loại:
- iframe config link tương đối: Khi ghép iframe vào main page sẽ có dạng sau/mypage/jobs
- iframe config link tuyệt đối: Khi ghép iframe vào main page sẽ có dạng sauhttps://{iframe_url}/mypage/jobs
Nếu bạn không thêm config vào trang web chính thì sẽ iframe config mặc định sẽ là link tương đối.
Nếu bạn muốn chuyển sang link tuyệt đối, hãy thêm fileconfig/application.rb vào sau iframe page.
Thông điệp từ iframe page bằng js
Cần xây dựng một kênh thông tin lắng nghe giữa hai bên website bằng một trong hai cách sau:
- Cách 1: Sử dụng API. Cách này khá rõ ràng tuy nhiên sẽ tốn tài nguyên của server vì phải request liên lục lên server.
- Cách 2: Giao tiếp trực tiếp từ client bằng JS.
Tuy nhiên, cách 2 sẽ có đôi chút khó khăn, bạn cần phải biết linh động để ứng biến, thay đổi lệnh khi cần thiết.
Hy vọng bài viết này sẽ giúp các bạn hiểu được phần nào iframe và những lưu ý về iframe để website của mình hoạt động một cách hiệu quả. Nếu trong quá trình phát triển website, bạn có bất kỳ khó khăn nào cần giúp đỡ thì đừng ngần ngại mà hãy liên hệ cho Tino Host chúng tôi để được tư vấn miễn phí.
Những câu hỏi thường gặp
Những trình duyệt nào hỗ trợ cho việc sử dụng iframe?
Hiện nay có rất nhiều trình duyệt cho phép bạn dùng iframe, trong đó có: Chrome, Internet Explorer/ Edge, FireFox, Safari, Opera.
Cú pháp của đóng mở popup là gì?
Để thêm một event lắng nghe các thông điệp của iframe page, bạn có thể dùng cú pháp đóng mở popup như sau: window.addEventListener(“message”, function(event) { })
Làm sao để nhúng được iframe vào WordPress?
Có nhiều cách để nhúng được iframe vào WordPress và một trong số đó là dùng plugin.
Hướng dẫn nhúng iframe vào WordPress bằng plugin?
Cụ thể, bạn có thể dùng plugin advanced iframe để thực hiện, chỉ với các bước vô cùng đơn giản sau:
Bước 1: Đăng nhập wordpress → plugins → thêm mới và tìm kiếm → advanced iframe.
Bước 2: Cài đặt và kích hoạt plugin iframe WordPress. Sau đó đến tab advanced iframe → tab basic settings để thay đổi các kích thước.
Bước 3: Nhấn vào generate a shortcode for a current settings để lưu và tạo một mã ngắn.
Bước 4: Sao chép và dán mã vào trang bạn muốn nhúng iframe này.
