为什么人们还在使用 iframe？

对我来说，iframe 是纯粹的邪恶(好吧，也许没那么纯粹)。他们似乎制造了很多麻烦。是的，您的整个网站将加载一次，然后您可以只加载单个页面。但是人们为此发明了 AJAX。

我在使用 iframe时发现的最大问题之一是，我无法粘贴到其中一个子页面的链接，因为 URL 从未更改过(是的，我知道有一个解决方案)。第二，网络搜索引擎在索引这样的页面时可能会遇到问题。

有时，这些网站的可访问性更差，有些浏览器甚至可以不正确地显示它们。

There are better ways to design layouts without iframes. Everyday I can see some one asking at SO questions, like "How to access iframe with jQuery?".

那么 iframe 的好处是什么呢？还有什么理由继续使用它们呢？我只是想知道为什么。

89469 次浏览
小开

I use them on ajax websites, when I need to upload files without reloading the page.

小开

Framesets are outdated as of HTML 5, and sometimes you need to have a frame with another site within a site. Also AJAX can only do so much. Try uploading a file to a site on another domain through https without an iframe. AJAX won't help you there.

小开

I still see iframes being used in large corporations where they provide a single sign on which injects header information about the authenticated user which is then passed, via an iframe, towards the actual application(s). Since the "portal" surrounding the iframe handles all the specific authentication details those applications behind it don't need to have each an implementation for it, making things easier to make for the development team and having a single place to monitor and adjust authentication details of users.

小开

If a user has javascript disabled, iframes will work when ajax doesn't. This is not out of the question, considering that people use things like NoScript.

小开

Javascript WYSIWYG Editors use iframes, because that is easiest and best way to make it. For example TinyMCE uses it:

http://tinymce.moxiecode.com/

小开

Many Formatted Text Editors (e.g. TinyMCE, HTMLArea) are implemented as iframe.

小开
最佳答案

I can think of 2 reasons (at the moment) why people would still use iframes instead of AJAX:

1) Iframes circumvent the cross domain origin policy (images, scripts, and styles do not). This can be useful for pulling in sites / content from other domain names relatively safely. Basically, this allows the advantage of being able to visually show data from other domains without letting them stomp all over your page with unlimited access (like something like JSONP would be able to do).

2) You can load multiple types of resources from within an iframe, not just certain mime-types (you're relatively limited to application/javascript, application/x-javascript, text/css, text/xml, image/png, image/jpeg, image/gif with scripts, XHR, images, and sources). For instance, if I want to show you a PDF, I can open an iframe and let the Adobe Reader plugin show you that file. Additionally, in the same domain, if I want to pipeline a script, style, and image all together (inline on the page, image would have to be data URI), I can accomplish this with an iframe (and if it's in the same domain, port, and protocol I can access it with JavaScript as well).

Did you know that Gmail is a set of iframes? The visible part is just clever positioning. Additionally, many OAuth implementation (Twitter, Facebook, Google, Yahoo!) usually use iframes to associate a user on their domain with a successful authentication URL (for after the user logs in).

小开

iFrames are okay for some cases, as X-domain-requests, or posting data to a source via parameters. But when I want to access data across domains, I prefer using CSS-files - they can accept params, set cookies, add content to the page (:before & :after) and give a visual feedback.

小开

There are plenty of technical reasons to use them (especially the security issue mentioned by Dan Beam).

What you shouldn't do is use iframes “like frames”, doing navigation to new pages by updating the iframe only. As you say, this prevents the navigation from being bookmarkable/linkable, responding to the normal navigation buttons, and providing useful link affordances like open-in-new-tab.

But that's not peculiar to iframes. You can see more and more pages where the navigation is done by fetching new content with XMLHttpRequest and writing it to the main content div's innerHTML. Often this is done with jQuery load() and clever-clever slidey animations. This breaks navigation just as badly as iframe-used-as-frame, or indeed old-school framesets. It's a shame so many web authors are using this tactic believing it to be a super-modern web design methodology, when really it's just a new skin on yesterday's despised framesets.

You can work around it in both cases, but it means you have to store a viewstate in the # fragment identifier part and support proper hash-navigation, which isn't trivial. Even then you've still got problems with non-JS agents like search engines; you end up having to have a parallel ?-based and #-based navigation to support both. It's a pain and most don't bother.

小开

IFRAMEs are used to embed and isolate third-party content into a website.

Most of web advertising solutions are based on iframes - because they give security (cross-domain policy) and isolated rectangle on screen which can be fully managed by third party content and scripting (a common use case is advertisments).

Another modern use of IFRAMES is a management of history (common back button workaround) of AJAX applications.

FRAMEs are poor version of IFRAMES. Their use is declining.

小开

In addition to others reasons, I have one specific usage of iframe in my application. Unfortunately, the target browser in my case is Internet Explorer 6. I need to have a footer and a header that are fixed in my web pages. The main part of this page is scrollable.

However, there is a bug in IE6 where I cannot display a div element on top of select elements using the z-index CSS property. Thus, I need to create an iframe that will be used as a hack to avoid this problem.

Of course, this is a really specific usage of iframe and only concern IE6...

小开

I was building a social network and i see iframes being useful for widgets to put on other peoples website to show like a mini profile or integrate with the content on a remote server. Seems like the most simple way to build this. I know some widgets use JavaScript. Also with the iframe method the session is the same as visiting the site like normal, so great for like buttons.


提交答案