IFrame (HTML) có lỗi thời không? [đóng cửa]


90

Nhận được thông báo mâu thuẫn về điều đó, hy vọng chúng không. Tôi không thể tưởng tượng được việc hỗ trợ cho nó sẽ dừng lại, vì có hàng triệu trang web sử dụng chúng.

Một số câu hỏi bổ sung về điều đó:

  1. Tại sao họ nên loại bỏ thẻ này?
  2. Bất kỳ thay thế cho nó?

Câu trả lời:


53

Theo ý kiến của tôi , W3C đã nổ súng trong việc loại bỏ các iframe khỏi các loại tài liệu HTML và XHTML Nghiêm ngặt. Về lý thuyết, bạn sẽ sử dụng <object>phần tử để thêm các đối tượng nước ngoài vào tài liệu của mình, nhưng sự khác biệt và hạn chế của trình duyệt đã khiến điều này trở nên không thông minh đối với nhiều nhà phát triển. Với HTML 5 thực dụng hơn nhiều (vẫn còn là bản nháp), iframe đã trở lại và thậm chí có thêm hai thuộc tính mới: seamlessvà thuộc tính hấp dẫn sandbox.


Thật tuyệt, tôi chỉ hy vọng các trình duyệt bắt đầu hỗ trợ tải lên tệp AJAX để chúng tôi không cần sử dụng iframe hoặc flash cho việc đó.
Xeoncross


2
Cập nhật: thuộc tính semless đã bị xóa khỏi html5. Xem: caniuse.com/#feat=iframe-seamless
Gabe

76

Hỗ trợ cho <iframe>vẫn còn trong HTML 5, vì vậy tôi không nghĩ điều này sẽ thay đổi trong tương lai gần.

Để trả lời các câu hỏi khác của bạn:

  1. <iframe>s (như các khung nói chung) thường không thân thiện với người dùng:
    • Chúng không cho phép dễ dàng truy cập nội dung trong khung thông qua URL (ít nhất mà không làm mất nội dung bên ngoài khung).
    • Hầu hết người dùng "technophobe" đều bị kích thích bởi khung hình.
    • Theo như tôi biết thì chúng hiển thị chậm hơn cho các trình duyệt
  2. Các giải pháp thay thế bao gồm tạo trang động (SSI, PHP, Rails, v.v.) và sử dụng JavaScript / AJAX để thay đổi nội dung của ví dụ: <div>

Nói rõ hơn: Tôi đang nói đến <iframe>như một phần tử giao diện. Không phải là một phần tử ẩn để tải những thứ khác như Google Mail chẳng hạn.


29
+1 cho quan điểm rằng Google đang sử dụng iframe cho các mục đích chuyên biệt cao.
cgp

25

Khung nội tuyến đã lỗi thời đối với bố cục trang. Đừng bao giờ sử dụng chúng thay vì bố cục CSS tốt, ngay cả bố cục dựa trên bảng cũng tốt hơn.

Các lý do chính đáng để sử dụng iframe là:

  • ads : ví dụ: adwords sử dụng kỹ thuật này, nó tốt cho việc đóng gói - ad css sẽ không phá hủy trang của bạn.
  • iframe ẩn : nó có thể được sử dụng cho hàng trăm thứ có thể sử dụng được, như theo dõi, ajax-thay thế, v.v.

35
*** KHÔNG sử dụng iframe cho adwords, đó là vi phạm ĐKDV. *** scribd.com/doc/97655/…
cgp

37
altCognito: AdWords sử dụng iframe, không phải tôi :) Ý tôi không phải là đặt iframe của adword vào iframe khác.
Nhà tư tưởng

7
Tôi biết đó là một lỗi phổ biến ở đó (do đó là tất cả các bài báo) vì vậy tôi muốn gắn cờ nó để đảm bảo mọi người hiểu những gì bạn đang nói.
cgp

5
Iframe là điều bắt buộc khi bao gồm nội dung phức tạp phải được phân phát từ một miền khác và không được thao tác với mã CSS hoặc JS của trang hiện tại.
vsync

4
Những gì bạn đang nói không liên quan gì đến iframe. Vấn đề là - Bạn sử dụng iframe để đưa vào một ngữ cảnh duyệt bên ngoài, lồng nhau. Bạn không sử dụng nó cho 'bố cục trang'. Nếu tôi cần bối cảnh duyệt web lồng nhau - làm thế nào trên thế giới tôi sẽ sử dụng "bố cục CSS tốt" để thay thế? Nó không có ý nghĩa.
Chris B

24

IFrame không lỗi thời, nhưng lý do để sử dụng chúng là rất hiếm.

Lý do sử dụng iframe:

  • Nó tuyệt vời để tách nội dung của người khác khỏi các miền khác nhưng nó không tích hợp trơn tru. (bảng định kiểu, javascript, v.v.)
  • Việc tích hợp đa phương tiện đôi khi có thể được thực hiện dễ dàng hơn thông qua iframe thay vì sử dụng thẻ nhúng.
  • Thực sự, những trường hợp thực sự chuyên biệt như trường hợp của gmail, nơi họ đang sử dụng nó để quản lý âm thanh và lịch sử.

Tôi cũng sẽ trả lời rằng không cần xóa iframe, đó là một thẻ cần thiết và sẽ tồn tại trong một thời gian.


12

Tôi đã thấy nhiều diễn đàn đề xuất thẻ Object thay thế cho IFrame, thẻ này có thể hoạt động trong hầu hết các trường hợp.

Ví dụ: tôi có một tệp PDF hiển thị trong IFrame (vì có những thứ khác chúng tôi cần hiển thị trên trang ngoài PDF) và có thể làm cho nó hiển thị tốt bằng cách sử dụng Đối tượng.

Những gì đã:

<iframe id="confirmed_pdf" class="current_pdf" src="/prescriptions/show_pdf?id=123" height="570" width="480"></iframe>

Đã trở thành:

<object id="confirmed_pdf" class="current_pdf" data="/prescriptions/show_pdf?id=123" type="application/pdf" height="570" width="480">
  <p>[Show this message if displaying the PDF did not work]</p>
</object>

Nhưng Object không phải là một sự thay thế phù hợp để đáp ứng yêu cầu CHỈ có thể in phần PDF của trang.

IFrame giống như cửa sổ của chính nó trong trang (về cơ bản là một cửa sổ trong một cửa sổ) và khi bạn nhận được đối tượng window, bạn có thể gọi .print () trên đó, như:

jQuery("#confirmed_pdf").contentWindow.print();

IFrame có thuộc tính contentWindow, đó là điều khiến chỉ in được phần đó. Đối tượng không có thuộc tính contentWindow, vì vậy không có cách nào để chỉ in phần của trang.

Vì vậy, có vẻ như nếu bạn chỉ sử dụng IFrame để hiển thị một thứ gì đó, thì có những thẻ khác như Đối tượng có thể được sử dụng thay thế. Nhưng nếu bạn cần tương tác với nội dung của IFrame theo những cách nhất định, thì IFrame có thể cần thiết.


7

IFrame được sử dụng rất nhiều với AJAX. Ví dụ, GMail sử dụng chín IFrame ẩn mà tôi tin tưởng.


5
Tôi đếm năm iframe. Một trong số đó không bị ẩn, và trên thực tế, một trong số đó là gần như toàn bộ khung cảnh. IFrame thường không được sử dụng với Ajax (dù sao cũng không phải trong bất kỳ khuôn khổ chính nào). Gmail đang sử dụng iframe cho những thứ như: Theo dõi lịch sử, âm thanh (kỳ lạ) và một số loại vẽ canvas.
cgp

Tôi vừa xem một bài báo mà tôi đã đọc vài năm trước.
John Topley

7

IFrames không chết, nhưng Frameset / Frames đang chết.

Trong 2 bản phát hành gần đây nhất của IE (IE7 / IE8), việc phóng to các Khung (không phải IFrame) đã tạo ra những kết quả thảm hại.

Bằng mọi cách, hãy sử dụng IFrame, nhưng IMHO phải tránh xa các Khung / Khung.


5

Tại công ty trước đây của tôi, chúng tôi đã cung cấp một ứng dụng được lưu trữ mà khách hàng sẽ tích hợp vào các trang web của riêng họ. Đôi khi, họ sẽ sử dụng IFrame để làm điều này, điều chỉnh trang được lưu trữ của chúng tôi với thiết kế hiện có của họ. Đôi khi điều này thậm chí còn được thực hiện liền mạch (ví dụ: IFrame không có đường viền hoặc thanh cuộn, nó chỉ giống như một phần của trang). Tôi coi đây là một cách sử dụng thẻ tốt.


Iframe là yếu tố bắt buộc để xử lý những thứ bạn cần đưa vào các trang web khách hàng với phong cách và Javascript của riêng bạn, để mã của người dùng không bị hỏng. CSS có thể bị ghi đè dễ dàng và đôi khi JS có thể gây ra xung đột (trong một số trường hợp hiếm hoi), vì vậy tốt nhất cho phương pháp tiếp cận "Hệ thống đóng".
vsync

5

Chúng có thể cực kỳ hữu ích trong một số trường hợp, nhưng chúng có giới hạn. Đặc biệt là nhúng chức năng chung trên nhiều trang web.

Ví dụ: tôi có một khách hàng điều hành một số trang thương mại điện tử về hàng hóa của Scotland. Là một phần của việc này, chúng tôi đã phát triển một số ứng dụng đơn giản để xác định các tên tộc có thể có từ họ của bạn hoặc lựa chọn của bạn về bánh tartan (cười khúc khích nếu bạn muốn nhưng bánh tartans trị giá 700 triệu đô la một năm cho nền kinh tế của chúng tôi). Cơ sở dữ liệu đằng sau điều này lớn đáng ngạc nhiên (gần mười nghìn hàng trong tên lõi và bảng tartans) và được cập nhật khá thường xuyên.

Vì vậy, chúng tôi đã thiết lập các ứng dụng để chạy trên một trang web và sau đó nhúng các ứng dụng này vào các trang web khác của chúng tôi bằng cách sử dụng iframe, cho phép truyền tham số javascript đơn giản để chúng tôi có thể tích hợp lựa chọn tartan hoặc clan với chức năng trên trang nhúng. Khung nội tuyến được đặt là không có thứ tự để nó xuất hiện hoàn toàn liền mạch với người dùng cuối.

Tất nhiên sẽ có nhiều cách khác để làm điều này, nhưng việc sử dụng iframe rất đơn giản và mạnh mẽ. Và nó chắc chắn không bị lỗi thời.


5

Ngựa cho các khóa học ... <iframe> cũng giống như bất cứ thứ gì khác ... với mục đích phù hợp, chúng là công cụ phù hợp; cho mục đích sai, chúng là một vụ hack xấu xí, hoặc tệ hơn.

Trong Ajax, <div> thường là vùng chứa thích hợp hơn. Ở một số nơi, hoạt động truyền tải nội dung bên ngoài như một phần của trang web của bạn, như được hỗ trợ bởi <iframe> s, là không phù hợp.

Hôm trước, nhóm của tôi đã sử dụng <iframe> như một cách lý tưởng để cung cấp cho người dùng quyền truy cập vào lịch sử e-mail HTML của họ - e-mail là những trang <html> hoàn chỉnh mà chúng tôi muốn dễ dàng chèn vào mẫu web của mình. <iframe> hoàn toàn hoàn hảo để trình bày dữ liệu đó] '.

Mặt khác, các <iframe> hầu như luôn bị xóa hoặc vô hiệu hóa trong bất kỳ nội dung nào do người dùng gửi được xuất ngược trở lại trang web, vì trong bối cảnh đó, chúng là một vấn đề bảo mật lớn.


4

Đặc tả tiện ích google hiện dựa trên iframe: http://code.google.com/apis/gadgets/docs/spec.html

Hiện tại, chúng là cách đơn giản duy nhất để cung cấp sự cô lập cho các ứng dụng javascript được lấy từ nhiều tên miền / nhà cung cấp.

Ngoài ra, nhiều tiện ích mà mọi người nhúng trên trang web của họ từ bên thứ ba sử dụng iframe.

Mặc dù chúng có những hạn chế, iframe cung cấp một giải pháp thực tế cho các vấn đề phổ biến trên web. Tôi phải đoán rằng họ sẽ xuất hiện trong một thời gian tới.


2

Tôi vừa thay đổi một trang web từ Khung hình bình thường sang Khung nội tuyến vì các khung hình bình thường không thể làm những gì tôi cần. Nó không gây ra vấn đề gì với phần còn lại của cơ sở mã.


2

Các vấn đề về Tuân thủ và Bảo mật cũng có thể khiến bạn sử dụng Iframe; Giỏ hàng là cách triển khai dựa trên IFrame phổ biến khi bạn muốn kết hợp trực quan giỏ hàng như một phần của một số trang web mà không chịu hoàn toàn trách nhiệm về phía xử lý thanh toán của mọi thứ.

Chúng tôi thường cung cấp Iframe để tích hợp nội dung Thương mại điện tử và khách hàng của chúng tôi như chìa khóa trao tay.


0

Tôi làm việc cho một công ty đã sử dụng khung cho mọi thứ từ menu kéo xuống, danh sách, khối nội dung, v.v. chỉ để che đi sự phức tạp của biểu mẫu web .net. Ứng dụng này rất chậm và chỉ chạy trên IE. Đừng làm điều này.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.