Frames trong HTML

Các khung (Frame) HTML được sử dụng để chia cửa sổ trình duyệt của bạn thành nhiều phần trong đó mỗi phần có thể tải một tài liệu HTML riêng biệt. Tập hợp các khung trong cửa sổ trình duyệt được gọi là tập khung(frameset). Cửa sổ được chia thành các khung theo cách tương tự như các bảng được tổ chức: thành hàng và cột.


Nhược điểm của Frame

Có một số hạn chế khi sử dụng frame, vì vậy bạn không nên sử dụng frame trong các trang web của mình:

  • Một số thiết bị nhỏ hơn thường không thể phù hợp với frame hình vì màn hình của chúng không đủ lớn để chia nhỏ.
  • Đôi khi trang của bạn sẽ được hiển thị khác nhau trên các máy tính khác nhau do độ phân giải màn hình khác nhau.
  • Nút quay lại của trình duyệt có thể không hoạt động như người dùng hy vọng.
  • Vẫn còn một số trình duyệt không hỗ trợ công nghệ frame.


Tạo khung

Để sử dụng các khung trên một trang, chúng ta sử dụng thẻ <frameset> thay vì thẻ <body>. Thẻ <frameset> định nghĩa, cách chia cửa sổ thành các khung. Thuộc tính row của thẻ <frameset> xác định khung ngang và thuộc tính cols xác định khung dọc. Mỗi khung được biểu thị bằng thẻ <frame> và nó xác định tài liệu HTML nào sẽ mở vào khung.

Lưu ý: Thẻ <frame> không được dùng trong HTML5. Không sử dụng phần tử này.


Ví dụ

Sau đây là ví dụ để tạo ba khung ngang:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>
	
   <frameset rows = "10%,80%,10%">
      <frame name = "top" src = "/html/top_frame.htm" />
      <frame name = "main" src = "/html/main_frame.htm" />
      <frame name = "bottom" src = "/html/bottom_frame.htm" />
   
      <noframes>
         <body>Trình duyệt của bạn không hỗ trợ frames.</body>
</noframes> </frameset> </html>

Vẫn ví dụ trên, ở đây chúng ta thay thế thuộc tính row bằng cols và thay đổi chiều rộng của chúng. Điều này sẽ tạo tất cả ba khung theo chiều dọc:

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Frames</title>
   </head>
   
   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "/html/top_frame.htm" />
      <frame name = "center" src = "/html/main_frame.htm" />
      <frame name = "right" src = "/html/bottom_frame.htm" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
   
</html>

Các thuộc tính thẻ <frameset>

Sau đây là các thuộc tính quan trọng của thẻ <frameset>


STT Thuộc tính và mô tả
1

cols

Chỉ định số lượng cột được chứa trong frameset và kích thước của mỗi cột. Bạn có thể chỉ định chiều rộng của mỗi cột theo một trong bốn cách sau:

  • Giá trị tuyệt đối tính bằng pixel. Ví dụ: để tạo ba khung dọc, hãy sử dụng cols = "100, 500, 100".
  • Phần trăm của cửa sổ trình duyệt. Ví dụ: để tạo ba khung dọc, hãy sử dụng cols = "10%, 80%, 10%".
  • Sử dụng ký tự đại diện. Ví dụ: để tạo ba khung dọc, hãy sử dụng cols = "10%, *, 10%". Trong trường hợp này, ký tự đại diện chiếm phần còn lại của cửa sổ.
  • Theo chiều rộng tương đối của cửa sổ trình duyệt. Ví dụ: để tạo ba khung dọc, hãy sử dụng cols = "3 *, 2 *, 1 *". Đây là một sự thay thế cho tỷ lệ phần trăm. Bạn có thể sử dụng độ rộng tương đối của cửa sổ trình duyệt. Ở đây cửa sổ được chia thành sáu phần: cột đầu tiên chiếm một nửa cửa sổ, cột thứ hai chiếm một phần ba và cột thứ ba chiếm một phần sáu.

2 rows
Thuộc tính này hoạt động giống như thuộc tính cols và nhận các giá trị giống nhau, nhưng nó được sử dụng để chỉ định các hàng trong frameset. Ví dụ: để tạo hai khung ngang, hãy sử dụng row = "10%, 90%". Bạn có thể chỉ định chiều cao của mỗi hàng theo cách tương tự như đã giải thích ở trên cho các cột.
3 border
Thuộc tính này chỉ định chiều rộng của đường viền của mỗi frame bằng pixel. Ví dụ: border = "5". Giá trị bằng 0 có nghĩa là không có đường viền.
4 frameborder
Thuộc tính này chỉ định xem có nên hiển thị đường viền ba chiều giữa các frame hay không. Thuộc tính này nhận giá trị 1 (có) hoặc 0 (không). Ví dụ frameborder = "0" chỉ định không có đường viền.
5 framespacing
Thuộc tính này chỉ định lượng không gian giữa các frame trong một frameset. Nó có thể nhận bất kỳ giá trị số nguyên nào. Ví dụ: framespacing = "10" có nghĩa là phải có 10 pixel khoảng cách giữa mỗi frame.


Các thuộc tính thẻ <frame>

Sau đây là các thuộc tính quan trọng của thẻ <frame>


STT Thuộc tính và mô tả
1

src

Thuộc tính này được sử dụng để cung cấp tên tệp sẽ được tải trong frame. Giá trị của nó có thể là bất kỳ URL nào. Ví dụ: src = "/html/top_frame.htm" sẽ tải một tệp HTML có sẵn trong thư mục html.

2 name
Thuộc tính này cho phép bạn đặt tên cho frame. Nó được sử dụng để chỉ ra frame mà tài liệu sẽ được tải vào. Điều này đặc biệt quan trọng khi bạn muốn tạo liên kết trong một frame tải các trang vào một frame khác, trong trường hợp đó, frame thứ hai cần một tên để tự xác định là mục tiêu của liên kết.
3 frameborder
Thuộc tính này chỉ định xem các đường viền của frame đó có được hiển thị hay không; nó sẽ ghi đè giá trị đã cho trong thuộc tính frameborder trên thẻ <frameset> nếu một giá trị được cung cấp và điều này có thể nhận các giá trị 1 (có) hoặc 0 (không).
4 marginwidth
Thuộc tính này cho phép bạn chỉ định chiều rộng của khoảng trống giữa bên trái và bên phải của các đường viền của frame và nội dung của frame. Giá trị được tính bằng pixel. Ví dụ: marginwidth = "10".
5 marginheight
Thuộc tính này cho phép bạn chỉ định chiều cao của khoảng trống giữa phần trên và phần dưới của đường viền frame và nội dung của nó. Giá trị được tính bằng pixel. Ví dụ marginheight = "10".
6 noresize
Theo mặc định, bạn có thể thay đổi kích thước bất kỳ frame nào bằng cách nhấp và kéo trên các đường viền của frame. Thuộc tính noresize ngăn người dùng có thể thay đổi kích thước frame. Ví dụ noresize = "noresize".
7 scrolling
Thuộc tính này kiểm soát sự xuất hiện của các thanh cuộn xuất hiện trên frame. Nó nhận các giá trị "yes", "no" hoặc "auto". Ví dụ: scrolling = "no" có nghĩa là nó không được có thanh cuộn.
8 longdesc
Thuộc tính này cho phép bạn cung cấp liên kết đến một trang khác có chứa mô tả dài về nội dung của khung. Ví dụ longdesc = "framedescription.htm"

Trình duyệt hỗ trợ cho frame

Nếu người dùng đang sử dụng bất kỳ trình duyệt cũ nào hoặc bất kỳ trình duyệt nào không hỗ trợ frame thì phần tử <noframes> sẽ được hiển thị cho người dùng.

Vì vậy, bạn phải đặt một phần tử <body> bên trong phần tử <noframes> vì phần tử <frameset> sẽ thay thế phần tử <body>, nhưng nếu trình duyệt không hiểu phần tử <frameset> thì nó sẽ hiểu những gì bên trong Phần tử <body> được chứa trong phần tử <noframes>.

Bạn có thể đưa ra một số thông điệp hay cho người dùng của bạn có trình duyệt cũ. Ví dụ, Xin lỗi !! Trình duyệt của bạn không hỗ trợ frame. như trong ví dụ trên.


Tên của frame và thuộc tính target

Một trong những cách sử dụng frame phổ biến nhất là đặt các thanh điều hướng vào một frame và sau đó tải các trang chính vào một khung riêng biệt.

Hãy xem ví dụ sau trong đó tệp test.htm có mã sau

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Target Frames</title>
   </head>
	
   <frameset cols = "200, *">
      <frame src = "/html/menu.htm" name = "menu_page" />
      <frame src = "/html/main.htm" name = "main_page" />
      
      <noframes>
         <body>Trình duyệt của bạn không hỗ trợ frames.</body>
      </noframes>
   </frameset>
	
</html>

Ở đây, chúng ta đã tạo hai cột để điền vào hai frame. Frame đầu tiên rộng 200 pixel và sẽ chứa thanh menu điều hướng do tệp menu.htm triển khai. Cột thứ hai lấp đầy không gian còn lại và sẽ chứa phần chính của trang và nó được thực hiện bởi tệp main.htm. Đối với tất cả ba liên kết có sẵn trong thanh menu, chúng ta đã đề cập đến frame mục tiêu là main_page, vì vậy bất cứ khi nào bạn nhấp vào bất kỳ liên kết nào trong thanh menu, liên kết có sẵn sẽ mở ra trong trang chính.


Sau đây là nội dung của tệp menu.htm

<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "http://www.google.com" target = "main_page">Google</a>
      <br />
      <br />
      
      <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
      <br />
      <br />
      
      <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
   </body>
	
</html>


Sau đây là nội dung tệp main.html

<!DOCTYPE html>
<html>

   <body bgcolor = "#b5dcb3">
      <h3>Đây là trang chính và nội dung từ bất kỳ liên kết nào sẽ được hiển thị tại đây..</h3>
      <p>Bây giờ hãy nhấp vào bất kỳ liên kết nào và xem kết quả.</p>
   </body>
	
</html>
Thuộc tính target cũng có thể nhận một trong các giá trị sau:

STT Tuỳ chọn & Mô tả
1

_self

Tải trang trong frame hiện thời

2

_blank

Tải trang vào cửa sổ trình duyệt mới. Mở một cửa sổ mới.

3

_parent

Tải trang vào cửa sổ cha, trong trường hợp chỉ có một frameset là cửa sổ trình duyệt chính.

4

_top

Tải trang vào cửa sổ trình duyệt, thay thế mọi frame hiện tại.

5

targetframe

Tải trang vào targetframe được đặt tên.