Html đánh dấu màu xanh

iFrame HTML là gì? . Trong bài viết này, Tenten sẽ giới thiệu và đưa ra các ví dụ cụ thể có thể giúp bạn dễ hiểu hơn về các thuộc tính và cách sử dụng iFrame HTML

nội dung

Giới thiệu về thẻ iFrame HTML

Thẻ iFrame HTML là những khung nội tuyến được sử dụng để chèn Tài liệu HTML vào bên trong Tài liệu HTML khác. IFrame được sử dụng rộng rãi trong quá trình thiết kế trang web để chèn nội dung trực tiếp vào trang web từ các nguồn khác nhau như nội dung quảng cáo, bảng điều khiển điều khiển,…
Hầu hết các . Điều này có thể được thực hiện bằng cách sử dụng JavaScript hoặc bằng cách sử dụng thuộc tính "mục tiêu" trong HTML.

Mục tiêu chính của iFrame HTML được sử dụng để hiển thị một trang web bên trong một trang web khác thông qua việc sử dụng thẻ có tên gọi

Ưu nhược điểm của iFrame HTML

iFrame HTML là thẻ HTML được sử dụng để hiển thị nội dung từ Trang web khác trên Web WordPress mà bạn sở hữu. Để dễ hiểu hơn, tôi thường định cấu hình nó như một cửa sổ cho phép khách hàng truy cập tương tác với nội dung từ một Trang web khác mà không cần rời khỏi trang Web đang duyệt. Điều này có thể giúp hạn chế ảnh hưởng đến tốc độ tải Máy chủ và Trang web của bạn.
iFrame HTML còn nhiều ưu điểm khác mà tôi muốn giới thiệu với bạn ngay sau đây.

• Nó có thể hiển thị nhiều quảng cáo, cho phép bạn nhúng nội dung trực tiếp theo một cách tự làm.
  Bạn có thể hiển thị nội dung từ các nguồn bên ngoài ở mọi vị trí trên Trang web một cách thuận tiện.
• Một điểm khác tôi đánh giá rất cao, đó là iFrame rất an toàn. Lý do là vì người xem không có quyền truy cập vào mã gốc của nội dung

Tuy nhiên, mọi vấn đề đều có hai mặt. Bên cạnh những ưu điểm tuyệt vời, tôi cũng muốn lưu ý với bạn một số hạn chế của iFrame HTML

• Nếu liên kết với các trang độc hại, nó có thể gây ra các mối nguy hiểm về bảo mật. Máy tính của người dùng có thể bị lây nhiễm mã độc và khiến trang của bạn bị mất độ tin cậy
• iFrame HTML có thể làm chậm trang Web, không lý tưởng để tối ưu hóa công cụ tìm kiếm. Đây là một điểm hạn chế khiến tôi rất quan tâm khi sử dụng thẻ HTML này. Tôi khuyên bạn chỉ nên sử dụng nó khi thực sự cần thiết
• Ngoài ra, không phải mọi loại thiết bị đều hỗ trợ Iframe

Có nên sử dụng iFrame HTML cho trang Web hay không?

Như Tenten đã phân tích ở trên, iFrame HTML mang lại rất nhiều lợi ích cho bạn. Nó làm cho trang Web của bạn được minh họa sinh động, sáng tạo hơn. Đây là yếu tố quan trọng giúp bạn giữ chân người truy cập lại trang Web lâu hơn, tăng tỷ lệ quay lại trang. Những điều này cũng góp phần giúp bạn tăng thứ hạng của trang Web trên trang kết quả của các công cụ tìm kiếm.
Tuy nhiên, bạn cũng cần cân nhắc những vấn đề có thể gặp phải khi sử dụng iFrame. Nếu bạn không thể đảm bảo thông tin của nội dung trích dẫn từ trang Web khác là chính xác, hợp pháp.
Nguy hiểm hơn nữa, các đoạn mã có thể chứa mã độc. Chúng không chỉ ảnh hưởng xấu đến trang của bạn mà còn có thể gây nguy hiểm cho người dùng. Thông tin quan trọng có thể bị cướp, Trang web có thể bị chuyển hướng không kiểm soát,… Tất cả đều có thể ảnh hưởng đến uy tín của bạn.
Khi bạn chèn nội dung của trang khác vào Trang web của mình, các Bot Tìm kiếm của Google sẽ không dẫn đến Trang web của bạn mà liên kết đến Liên kết được nhúng. Điều này ảnh hưởng lớn đến công việc SEO của bạn, dẫn khách hàng đến trang khác.
Chính vì thế, bạn chỉ nên sử dụng iFrame khi thực sự cần thiết. Don't use it too normal nhé.

Cú pháp để sử dụng iFrame HTML

To use iFrame HTML can be used like after

• iframe. Sử dụng thẻ để khai báo sử dụng iFrame HTML
• src. Thuộc tính khai báo URL của trang sẽ được chèn vào khung nội tuyến

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 khung nội tuyến (theo pixel đơn vị) bằng cú pháp

Với cú pháp trên, iFrame HTML sẽ được thêm vào nhưng được xác định chiều cao và chiều rộng của khung.
Ví dụ.

Ngoài ra, chúng ta cũng có 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 theo cách chúng ta khai báo giá trị cho iFrame HTML.
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 đường viền, khai báo màu sắc cho đường viền,…
iFrame HTML .

Với cú pháp trên, src is a URL as normal; .
Ví dụ.

Thuộc tính của iFrame HTML

Có rất nhiều thuộc tính (thẻ) hữu ích khi sử dụng thẻ iframe trong HTML

• src. Thuộc tính này được sử dụng để chèn tệp vào iFrame HTML. Nếu là một URL, thì trang web được chỉ định sẽ được tải bên trong iFrame
• Tên. Tên thuộc tính thường được sử dụng để định danh một iFrame. Sẽ rất hữu ích nếu bạn muốn tạo một liên kết để mở một trang web khác
• cho phép toàn màn hình. Thuộc tính này cho phép hiển thị khung ở định dạng chiều rộng đầy đủ. You have to set the value of this property to true to it effect
• viền khung. Thuộc tính này cho phép bạn khai báo có hoặc không có đường viền của khung. Khi giá trị được đặt là 1, đường viền sẽ không thể hiển thị, nếu giá trị được đặt là 0, đường viền của khung sẽ không thể hiển thị
• Chiều rộng lề. Cho phép bạn báo cáo khoảng cách của hai bên trái & phải của khung
• chiều cao lề. Thuộc tính này cho phép bạn khai báo khoảng cách phía trên & phía dưới của khung
• cuộn. Thuộc tính này được sử dụng để kiểm tra việc thanh cuộn (thanh cuộn) có hiển thị hay không hiển thị vào iFrame. Các giá trị bao gồm Yes hoặc No hoặc Auto
• Chiều cao. Được sử dụng để xác định chiều cao cho khung (Được xác định bằng % hoặc tính bằng pixel)
• chiều rộng. Được sử dụng để xác định chiều rộng cho khung (Được xác định bằng % hoặc tính bằng pixel)
• longdesc. Với sự trợ giúp của thuộc tính này, bạn có thể liên kết một trang khác với mô tả dài về nội dung trong khung của bạn

Ví dụ về thẻ trong HTML

Dưới đây là một số ví dụ về việc 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 chiều rộng và chiều cao

Hãy xem xét một ví dụ mà chúng tôi sẽ trình bày cách tạo iframe với chiều cao và chiều rộng cụ thể

TENTEN Iframes Demo

Here we are showing example of Iframe which containing specifc Height and width in pixels format

Kết quả

Use thẻ iframe trong HTML

Thuộc tính chiều rộng và chiều cao thông qua CSS

Vui lòng xem xét một ví dụ khác mà Tenten 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 chỉ định chiều cao và chiều rộng thông qua CSS. Ở đây chúng ta có thể thấy thanh cuộn đang được điều chỉnh theo kích thước nội dung.  

TENTEN Iframes Demo

Here we are showing example of Iframe which containing specifc Height and width in pixels format

Kết quả

Demo ví dụ về thuộc tính border của iframe trong HTML

Thuộc tính biên giới

Ở đây chúng ta đang xem xét một ví dụ rằng chúng ta sẽ thêm đường viền 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 đường viền,… Vì vậy .
Mã.

Tenten ifFrames Demo

Here we are showing example of Iframe which containing border with some additional CSS proprties

Kết quả

Thuộc tính mục tiêu

Hãy xem xét một ví dụ khác mà chúng tôi sẽ trình bày cách thuộc tính mục tiêu để mở một liên kết của một trang web bằng cách sử dụng iFrame

. DOCTYPE html>



< . htm” name=”iframe_a” height=”300px” width=”100%” title=”Iframe Ví dụ”>

Tenten Hosting

When the target attribute of a link matches the name of an iframe, the link will open in the iframe.

Kết quả

Thuộc tính sandbox

Thuộc tính hộp cát thường được sử 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ư chế độ

• Không nhấn được biểu mẫu gửi
• JavaScript JavaScript code is not done
• Không thêm thuộc tính target=”_blank”
• API bị vô hiệu
• Chặn các thuộc tính. Tự replay, auto play video,…

Tuy nhiên, chúng ta có thể bổ sung 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

Thuộc tính value

Mô tảallow-formsCho phép gửi biểu mẫuallow-scriptsCho phép thực thi mã lệnh JavaScriptallow-popupsCho phép mở thêm các liên kết có thuộc tính target=”_blank”allow-pointer-lockKích hoạt các API

Tổ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 khung 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ết

Tóm lại, iFrame HTML là gì? . Tuy nhiên, trong quá trình sử dụng iFrame, doanh nghiệp nên cân nhắc các vấn đề về nguồn gốc, mức độ bảo mật của dữ liệu để đảm bảo truyền thông an toàn nhất.
Hy vọng rằng qua bài viết của chúng tôi, bạn đọc đã có được những thông tin hữu ích và cái nhìn toàn diện về loại công cụ này, từ đó khai thác nó một cách có hiệu quả .