Alternative for frames in html5 using iframes

Asked 15/8, 2013 at 18:28 Answered 10/5, 2014 at 22:16

I am new to HTML5 and I have done some research and found out that the use of <frameset> is outdated and from what I read <iframes> are not. So can someone help me, I want to obtain the same result as the example shown but while using <iframes> or another substitute for <frameset> that is not deprecated in HTLM5?

<frameset cols="20%,*,">
    <frame src="menu.html">
    <frame src="events.html">
</frameset>

Wedlock answered 15/8, 2013 at 18:28 Comment(5)

There is no drop-in easy replacement for this. – Zaidazailer 15/8, 2013 at 18:29

What, specifically about frames are you trying to reproduce? Do you just want two columns? – Tempting 15/8, 2013 at 18:31

I want to have the same functionality as when using <frameset> – Wedlock 15/8, 2013 at 18:36

Your markup suggests that you are trying to get a fixed menu on the left side of your browser while the events list scrolls. Placing your menu markup in a div with {position: fixed} would accomplish the same thing. – Demanding 15/8, 2013 at 18:50

This article is a bit old but then frames have sucked for a long time now: nngroup.com/articles/why-frames-suck-most-of-the-time – Demanding 15/8, 2013 at 18:53

Frames have been deprecated because they caused trouble for url navigation and hyperlinking, because the url would just take to you the index page (with the frameset) and there was no way to specify what was in each of the frame windows. Today, webpages are often generated by server-side technologies such as PHP, ASP.NET, Ruby etc. So instead of using frames, pages can simply be generated by merging a template with content like this:

Template File

<html>
<head>
<title>{insert script variable for title}</title>
</head>

<body>
  <div class="menu">
   {menu items inserted here by server-side scripting}
  </div>
  <div class="main-content">
   {main content inserted here by server-side scripting}
  </div>
</body>
</html>

If you don't have full support for a server-side scripting language, you could also use server-side includes (SSI). This will allow you to do the same thing--i.e. generate a single web page from multiple source documents.

But if you really just want to have a section of your webpage be a separate "window" into which you can load other webpages that are not necessarily located on your own server, you will have to use an iframe.

You could emulate your example like this:

Frames Example

<html>
<head>
  <title>Frames Test</title>
  <style>
   .menu {
      float:left;
      width:20%;
      height:80%;
    }
    .mainContent {
      float:left;
      width:75%;
      height:80%;
    }
  </style>
</head>
<body>
  <iframe class="menu" src="menu.html"></iframe>
  <iframe class="mainContent" src="events.html"></iframe>
</body>
</html>

There are probably better ways to achieve the layout. I've used the CSS float attribute, but you could use tables or other methods as well.

Benzine answered 15/8, 2013 at 18:43 Comment(0)

HTML 5 does support iframes. There were a few interesting attributes added like "sandbox" and "srcdoc".

http://www.w3schools.com/html5/tag_iframe.asp

or you can use

<object data="framed.html" type="text/html"><p>This is the fallback code!</p></object>

Atomizer answered 15/8, 2013 at 18:38 Comment(3)

this injects html, head tags, is this still a valid html? – Lupita 19/8, 2014 at 6:7

I dont understand how to use this <object> tag, can you post more information? – Smitten 17/1, 2020 at 7:26

developer.mozilla.org/en-US/docs/Web/HTML/Element/object – Atomizer 17/1, 2020 at 20:8

While I agree with everyone else, if you are dead set on using frames anyway, you can just do index.html in XHTML and then do the contents of the frames in HTML5.

Rotund answered 10/5, 2014 at 22:16 Comment(0)

Recommended topics

Hot tags