Là iframe được coi là 'thực hành xấu'? [đóng cửa]


286

Ở đâu đó dọc theo dòng tôi đã chọn khái niệm rằng sử dụng iframe là 'thực hành xấu'.

Điều này có đúng không? Những ưu / nhược điểm của việc sử dụng chúng là gì?

Câu trả lời:


217

Như với tất cả các công nghệ, nó có những thăng trầm. Nếu bạn đang sử dụng iframe để đi xung quanh một trang web được phát triển đúng cách, thì tất nhiên đó là một thực tế tồi. Tuy nhiên đôi khi một iframe được chấp nhận.

Một trong những vấn đề chính với iframe phải thực hiện với dấu trang và điều hướng. Nếu bạn đang sử dụng nó để chỉ nhúng một trang bên trong nội dung của bạn, tôi nghĩ điều đó là tốt. Đó là những gì một iframe dành cho.

Tuy nhiên tôi cũng đã thấy iframe bị lạm dụng. Nó không bao giờ nên được sử dụng như một phần không thể thiếu trong trang web của bạn, mà là một phần nội dung trong một trang web.

Thông thường, nếu bạn có thể làm điều đó mà không có iframe, đó là một lựa chọn tốt hơn. Tôi chắc rằng những người khác ở đây có thể có nhiều thông tin hơn hoặc ví dụ cụ thể hơn, tất cả đều liên quan đến vấn đề bạn đang cố gắng giải quyết.

Như đã nói, nếu bạn bị giới hạn ở HTML và không có quyền truy cập vào một phụ trợ như PHP hoặc ASP.NET, v.v., đôi khi iframe là tùy chọn duy nhất của bạn.


23
"Nếu bạn bị giới hạn ở HTML và không có quyền truy cập vào phần phụ trợ như PHP hoặc ASP.NET, v.v., đôi khi iframe là tùy chọn duy nhất của bạn" ... điều đó không đúng. Bạn có thể nhúng nội dung bên ngoài vào trang của mình bằng cách lấy dữ liệu qua jquery ajax và sau đó điền một div với dữ liệu đó.
nhà phát

53
@ developer747 - Điều đó sẽ không hoạt động nếu nội dung bên ngoài nằm trên một trang web khác do chính sách xuất xứ tương tự . Trong một số trường hợp tối nghĩa, trang web từ xa có thể hỗ trợ JSONP ; nhưng có lẽ là không
Peter V. Mørch

2
Tôi cảm thấy iframe ít hữu ích hơn nhiều so với bộ khung trước đây bởi vì người dùng không thể thay đổi kích thước iframe - nhưng tôi sẽ không sử dụng bộ khung cho bất cứ thứ gì ngoại trừ hướng dẫn sử dụng vì nó không còn tồn tại trong html5. Ví dụ: Hướng dẫn sử dụng trò chơi
Domino

15
Cần phải đề cập rằng iframe hiện là cách duy nhất để xác định phạm vi CSS lồng nhau. Chúng tách biệt đánh dấu bên trong, bố cục, kiểu và Javascript * từ tài liệu bên ngoài, rất hữu ích trong nhiều trường hợp sử dụng và ứng dụng. * Javascript không bị cô lập nếu tài liệu bên trong chia sẻ nguồn gốc với bên ngoài; mặt khác, các tài liệu từ các nguồn gốc khác nhau vẫn có thể giao tiếp bằng cách sử dụng window.postMessage(), ví dụ để triển khai tự động thay đổi kích thước iframe hợp tác.
Tobia 17/03/2015

1
IFrame là ác! cũng có thể giúp đỡ
DanielV

75

Chúng không phải là thực hành xấu, chúng chỉ là một công cụ khác và chúng thêm linh hoạt.

Để sử dụng như một yếu tố trang tiêu chuẩn ... chúng tốt, bởi vì chúng là cách đơn giản và đáng tin cậy để tách nội dung trên nhiều trang. Đặc biệt đối với nội dung do người dùng tạo, có thể hữu ích khi "hộp cát" các trang nội bộ thành một iframeđánh dấu quá kém không ảnh hưởng đến trang chính. Nhược điểm là nếu bạn giới thiệu nhiều lớp cuộn (một cho trình duyệt, một cho iframe), người dùng của bạn sẽ cảm thấy thất vọng. Giống như adzm đã nói, bạn không muốn sử dụng iframeđiều hướng chính, nhưng hãy nghĩ về chúng như một văn bản / đánh dấu tương đương với cách một video hoặc một tệp phương tiện khác sẽ được nhúng.

Đối với các sự kiện nền kịch bản, sự lựa chọn thường nằm giữa một ẩn iframeXmlHttpRequestđể tải nội dung cho trang hiện tại. Sự khác biệt ở đây là iframetạo ra tải trang, do đó bạn có thể di chuyển qua lại trong bộ đệm của trình duyệt với hầu hết các trình duyệt. Lưu ý rằng Google, người sử dụng XmlHttpRequestmọi nơi, cũng sử dụng iframes trong một số trường hợp nhất định để cho phép người dùng di chuyển qua lại trong lịch sử trình duyệt.


11
Tôi nghĩ điều quan trọng là phải đề cập rằng iframe có thể được sử dụng để nhúng một trang từ một tên miền vào một trang từ một tên miền khác. Nếu trang được nhúng muốn theo dõi người dùng bằng cookie và giữ thông tin đó từ miền máy chủ, thì tùy chọn duy nhất của bạn là sử dụng iframe vì JS nằm dưới sự kiểm soát của miền máy chủ.
Nicholas Leonard

@NicholasLeonard Một ví dụ điển hình là bạn có thể sử dụng chúng để buộc bộ nhớ cache dựa trên bộ nhớ cache cục bộ trang bằng cách đặt trang chỉ mục thành tập lệnh phát hiện nếu trang con nằm trong bộ lưu trữ cục bộ. Sau đó, document.write nó từ localst Storage nếu nó ở đó và nếu không thêm iframe vào trang con đó. Trong trang con đó, có một tập lệnh để lưu trữ lớp ngoài của phần tử HTML vào bộ lưu trữ cục bộ. Một lý do thực sự tốt để sử dụng phương pháp này là nó cho phép bạn thêm vào một màn hình tải.

Tôi không đồng ý, nhưng tôi không thể đánh giá thấp nó, bởi vì đó là một POV quan trọng.
victorf

28

Đó là 'thực hành xấu' để sử dụng chúng mà không hiểu nhược điểm của chúng. Bài đăng của Adzm tổng hợp chúng rất tốt.

Trên flipside, gmail sử dụng rất nhiều iFrames trong nền cho một số tính năng thú vị của nó (như tải lên tệp tự động). Nếu bạn nhận thức được những hạn chế của iFrames, tôi không tin rằng bạn sẽ cảm thấy bất kỳ sự ép buộc nào về việc sử dụng chúng.


18

Đã làm việc với họ trong nhiều trường hợp, tôi thực sự nghĩ rằng iframe là chương trình web tương đương với câu lệnh goto. Đó là, một cái gì đó thường được tránh. Trong một trang web họ có thể là phần nào hữu ích. Tuy nhiên, chéo trang, chúng hầu như luôn là một ý tưởng tồi cho bất cứ điều gì ngoại trừ nội dung đơn giản nhất.

Hãy xem xét các khả năng ... nếu được sử dụng cho nội dung được tham số hóa, họ đã tạo ra một giao diện. Và trong một trang web chuyên nghiệp, giao diện đó yêu cầu quản lý phiên bản và SLA - hầu như luôn bị bỏ qua khi vội vàng để trực tuyến.

Nếu được sử dụng cho nội dung hoạt động - các khung lưu trữ tập lệnh - thì sẽ có các hạn chế tập lệnh tên miền chéo (khác nhau). Một số có thể bị hack, nhưng hiếm khi nhất quán. Và nếu nội dung đóng khung của bạn có nhu cầu tương tác, nó sẽ phải vật lộn để vượt ra ngoài khung.

Nếu được sử dụng với nội dung được cấp phép, thì các trang web tham gia sẽ bị gánh nặng do phải chuyển thông tin quyền lợi ra khỏi băng tần giữa các máy chủ.

Vì vậy, mặc dù, đôi khi hữu ích trong một trang web, chúng khá không phù hợp với bản mashup. Bạn tốt hơn nhiều khi nhìn vào cổng và portlets thực sự. Tồi tệ hơn, họ là con cưng của mọi tài tử web - nhiều người quản lý công nghệ đã bao vây họ như một giải pháp cho nhiều vấn đề. Trong thực tế, họ tạo ra nhiều hơn.


10

Dựa trên kinh nghiệm của tôi, một mặt tích cực của iframe là khi gọi mã của bên thứ ba, điều đó có thể liên quan đến việc gọi một javascript gọi Document.write();lệnh có lệnh. Như bạn có thể biết, các lệnh này không thể được gọi một cách không đồng bộ do cách phân tích cú pháp (DOM Parser, v.v.). Một ví dụ về điều này là http://sourceforge.net/projects/phpadsnew/ Tôi đã sử dụng iframe để giúp tăng tốc trang web của chúng tôi vì có nhiều cuộc gọi đến phpadsnews và trang web đang chờ phản hồi trước khi tiếp tục hiển thị khác nhau các bộ phận của trang. với iframe tôi có thể cho phép trang web hiển thị các phần khác của trang và vẫn gọi Document.write()lệnh của phpad không đồng bộ. Ngăn chặn và khóa js.


8

Chắc chắn có sử dụng cho folks iframes. Làm thế nào khác bạn sẽ đặt các tiện ích mạng thời tiết trên trang của bạn? Cách duy nhất khác là lấy XML của họ và phân tích nó, nhưng tất nhiên sau đó bạn cần có điều kiện để đưa ra đồ họa thời tiết vĩnh cửu ... không thực sự đáng giá, nhưng sẽ sạch hơn nếu bạn có thời gian.


6

Mô hình frameset ban đầu (Frameset và Frame-yếu tố) rất tệ từ quan điểm khả năng sử dụng. IFrame là một phát minh sau này không có nhiều vấn đề như mô hình frameset ban đầu, nhưng nó có nhược điểm.

Nếu bạn cho phép người dùng điều hướng bên trong IFrame, thì các liên kết và dấu trang sẽ không hoạt động như mong đợi (vì bạn đánh dấu URL của trang bên ngoài, nhưng không phải là URL của iframe).


1
phải không đồng ý ... một nhận xét rộng rãi như thế này không đủ điều kiện.
Dawesi

5

Khi trang chính của bạn tải giao thức HTTP và các phần của trang của bạn cần hoạt động trong giao thức HTTPS, iFrame có thể đánh bại jsonp.

Đặc biệt, nếu dataType của bạn không phải là json và cần được dịch trên máy chủ thành json và được dịch lại trên máy khách thành ví dụ html phức tạp.

Vì vậy, không - iFrame không phải là xấu xa.


5

Họ không xấu, nhưng thực sự hữu ích. Tôi đã gặp một vấn đề lớn trước đây khi tôi phải nhúng nguồn cấp dữ liệu twitter của mình và nó sẽ không cho phép tôi làm điều đó trên cùng một trang, vì vậy tôi đã đặt nó trên một trang khác và đặt nó dưới dạng iframe.

Chúng cũng tốt vì tất cả các trình duyệt (và trình duyệt điện thoại) đều hỗ trợ chúng. Chúng không thể được coi là một thực hành xấu, miễn là bạn sử dụng chúng một cách chính xác.


4

Điều đáng chú ý là iframe sẽ, bất kể tốc độ kết nối internet của người dùng của bạn hoặc nội dung của iframe, sẽ gây ra sự chậm chạp nhỏ (0,3 giây) nhưng tốc độ tải xuống trang của bạn rất chậm. Đây không phải là thứ bạn sẽ thấy khi kiểm tra nó cục bộ. Trên thực tế, điều này đúng với bất kỳ yếu tố nào được thêm vào một trang, nhưng iframe dường như tồi tệ hơn.


1
Tại sao? Và đây có phải là cách để tải iframe sau khi tải trang chính?
Nicholas Leonard

3
Tôi không nhớ tại sao họ lại chậm như vậy; Tôi đã nghiên cứu điều này một năm trước. Có lẽ bởi vì trình duyệt cơ bản tạo ra một bối cảnh kết xuất hoàn toàn mới cho mỗi iframe. Đối với việc làm cho chúng không tải cho đến khi tải trang hoàn tất, bạn có thể sử dụng iframe trống và sau đó đặt thẻ src của iframe sau khi tải trang hoàn tất. Tuy nhiên, lưu ý rằng ngay cả một iframe trống sẽ làm chậm kết xuất trang của bạn, mặc dù không phải là tải xuống, vì vậy mọi thứ sẽ vẫn xuất hiện chậm hơn một chút đối với người dùng của bạn.
Brian

3
Ngược lại, người ta có thể xem xét thảo luận về CDN (Mạng phân phối nội dung) khi tham chiếu tốc độ và iFrames. Hãy xem xét rằng iFrame có thể tải xuống các tài nguyên song song và do đó cung cấp tốc độ tăng (tùy thuộc vào trình duyệt). Đây là ít nhất một tài liệu tham khảo khác đồng ý với vị trí của tôi. developer.yahoo.com/performance/rules.html
Strixy 18/03/13

2
@Strixy: URL bạn chỉ định trạng thái IFrames rất tốn kém, ngay cả khi trống. Nó khuyến nghị giảm thiểu việc sử dụng IFrames. Sử dụng CDN để tăng tốc trang web của bạn là trực giao với việc sử dụng IFrames. CDN có thể giúp giảm thiểu chi phí sử dụng IFrame. Tuy nhiên, CDN không có IFrame tốt hơn CDN và IFrame.
Brian

1
@Strixy: Nếu bạn muốn tải xuống tài nguyên song song, có nhiều cách tốt hơn để làm điều đó. Điểm nóng cũ là tải tất cả những thứ đó qua javascript. Điểm hấp dẫn mới là sử dụng một nhân viên dịch vụ, cho phép bạn quản lý trực tiếp cách thức tác nhân người dùng tải, tải trước và lưu trữ tài nguyên trang web bằng logic phía máy khách. Điểm hấp dẫn mới khác là http / 2 đẩy, cho phép bạn gửi tài nguyên tới trình duyệt mà không cần chờ trình duyệt yêu cầu chúng. Tuy nhiên, vì bộ đệm http / 2 được kiểm tra sau khi bộ đệm khác của trình duyệt, nên thường là một lựa chọn kém cho mục đích này.
Brian

3

Tôi đã thấy IFRAME được áp dụng rất thành công như một cách dễ dàng để tạo các menu ngữ cảnh động, nhưng đối tượng mục tiêu của ứng dụng web đó chỉ là người dùng Internet Explorer.

Tôi muốn nói rằng tất cả phụ thuộc vào yêu cầu của bạn. Nếu bạn muốn đảm bảo trang của bạn hoạt động tốt như nhau trên mọi trình duyệt, hãy tránh IFRAME. Nếu bạn đang nhắm mục tiêu đối tượng hẹp và nổi tiếng (ví dụ: trên Intranet cục bộ) và bạn thấy lợi ích khi sử dụng IFRAME thì tôi sẽ nói rằng bạn đồng ý làm điều đó.

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.