Iframe là gì? Bật mí 7 điều bạn cần biết về iframe

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 đó:

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:

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:

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à:

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:

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.

iframe-la-gi

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:

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.

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

5/5 - (1 bình chọn)
Exit mobile version