Member Avatar for sleepswim

Hi all,

i've heard from many that i should stop using iframes and css instead. Although, all i really use iframes for is to load a page from another site into mine. Is there a way I can do this with css? or is it something i should just stick to iframes with?

Thanks and since this is my first post - looking forward to becoming an active member of this community!

- Caroline

  • 5 Contributors
  • 7 Replies
  • 147 Views
  • 6 Years Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

There’s confusion in the thread that’s worth clearing up for and others. The HTML iframe element is still part of the standards (frameset is what was deprecated), so using an iframe is not inherently “obsolete” — it’s the right tool when you need a separate browsing context. See MDN: iframe for the spec and attributes.

Which approach to use depends on control and goals:

  • If both pages are yours (same organization), prefer assembling the final page on the server or at build time (templating, server-side includes, or static-site partials). That avoids extra requests, is better for SEO, and gives consistent markup and styling. If you cannot move files, proxying the other server so the fragment appears under the same origin is another robust option. For cross-origin fetch rules and when client-side requests are allowed, see MDN: CORS.

  • If you need a live, isolated full page (or the remote page must remain independent), use an iframe. Add a meaningful title for accessibility, sandbox to restrict capabilities, and loading="lazy" to defer offscreen frames. Be aware that server headers like X-Frame-Options or CSP frame-ancestors can block embedding — check those headers if an embed shows blank. See MDN: X-Frame-Options.

If you plan to fetch just a fragment or data, prefer an API (JSON) and render it client-side instead of shuffling whole HTML pages. For communication between parent and an embedded cross-origin frame, use postMessage rather than DOM access. See MDN: Window.postMessage.

Concrete, minimal patterns (examples): a secure iframe with lazy loading and sandbox, or a small Fetch→DOM pattern that requests JSON and creates nodes (better than trying to transplant arbitrary fetched HTML). These give the same practical benefits Snapafun wanted (faster perceived updates, consistency) without the fragility of pasting remote pages into your DOM.

Recommended Answers

All 7 Replies

Member Avatar for FC Jamison

As far as I know, you can't do this using CSS alone.

I could be wrong, though...

Member Avatar for sleepswim

you're probably right. is there a better way to load a page aside from iframes? i hear they're going to become obsolete?!

Member Avatar for FC Jamison

I see that iframes have been deprecated...however, I do not see an alternative.

The displaying of pages that lie outside of your Web site...whether in frames or in iframes...is severely frowned upon in the design world.

So much so, that current college textbooks on HTML suggest using the deprecated "target" tag to open the site in a new window as an alternative.

Member Avatar for sleepswim

i'm only using the iframes as a design issue, the site we're loading in is also ours just on a different server. but it's good to know these points, nevertheless, thanks for your help!

Member Avatar for tgreer

CSS is never used to "load" content. It only styles the content. To dynamicaly load and/or generate content, we need to be talking about JavaScript.

It is entirely possible to load content into a DIV using JavaScript, for example, using the ".innerHTML" property.

Member Avatar for Snapafun

I have spent hours trying to be nice about iframes but to no avail. I wish to load my own html documents into my index page to ensure quick loading and consistancy. Having pages reload all the time on simple basic html and css sites is the real crime these days. So why is there no direct ( as in 'just as easy' ) equivelent to iframes? This post is 6 years old and still there is no answer to this. Some of us are still having to use iframes yet others are berating us and they are using resourse hungry alternatives to this issue. Can anyone give a clear, clean working example of the alternative to iframes that noobs can understand and use? Back to more searching - there might just be a gem hidden out there somewhere.

Member Avatar for drjohn

Pages will not load any faster in an iframe than if you simply opened the page in a new tab or replaced the existing page with the new page!!!
Unless of ocurse you are only altering a few lines displayed.
The data still has to be retrieved from the server, sent to the user and rendered.
The real question is what particular need do you have to load one web page inside another web page? Can you show us an existing page and explain what happens on it?

Also, if you are just after some data from another source, there is always AJAX, although I personally have never needed it. Aprt from in prebuilt calendar systems that is, as one of my clients uses a booking service, and they can use that technique to update availablility as different days are selected.

Edited by drjohn
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.