Inspiring

Question

Simulate a Frame build site in HTML5

Forum|Forum|1 year ago
March 3, 2024
3 replies
2414 views

How is the best way to simulate a frame-build site in HTML5 so the functionality be the same and work both descktop and mobile. Here are my index.htm look like.
Menu and Sidebar is easy to do, but then I click on a Topic in Sidebar menu will shall it open in Main "frame" and that the contens change in the main "frame" the you clink next Topic in the sidebar or a Link in the main page. Like I do now with help of frame's.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="en">
<head><title>Site index</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="publisher" content="xxxxxxxxxxxxxxxxxxxx">
<meta name="generator" content="Adobe CC DW 2021 ">
<meta name="description" content="xxxxxxxxxxxxxxxxxxxxx">
<link rel="SHORTCUT ICON" href="favicon.ico">
</head>

<frameset rows="148,*" cols="*" frameborder="yes">
<frameset rows="*" cols="220,680,*" frameborder="no">
<frame src="frame/frame_log.htm" name="log" frameborder="no" scrolling="no" noresize marginwidth="0" marginheight="0" title="log">
<frame src="frame/frame_top.htm" name="top" frameborder="no" scrolling="no" noresize marginwidth="0" marginheight="0" title="top">
<frame src="frame/tom.htm" name="tom" frameborder="no" scrolling="no" noresize id="tom" title="tom">
</frameset>
<frameset rows="*" cols="220,680,*" frameborder="no">
<frameset rows="250,80" frameborder="no">
<frame src="frame/frame_menu.htm" name="menu" frameborder="no" scrolling="auto" noresize marginwidth="0" marginheight="0" id="meny" title="menu" >
<frame src="frame/frame_count.htm" name="count" frameborder="no" scrolling="no" title="count">
</frameset>
<frame src="html/new.htm" name="text" frame scrolling="auto" marginwidth="10" marginheight="10" title="updates">
<frame src="frame/tom.htm" name="tom2" frame scrolling="auto" noresize marginwidth="5" id="tom2" title="tom2">
</frameset>
</frameset>
<noframes>
<body>
<a href="frame/frame_meny.htm">meny</a>
</body>
</noframes>
</html>
Here is how the page look like now, http://now.katoliknu.se

This topic has been closed for replies.

Nancy OShea

Community Expert

Nobody uses Frames anymore. They are deprecated and fail miserably on mobile & tablet devices.

Instead, use Server-Side Includes (SSIs ) for sitewide navigation that appears on all pages. See below for more details.

https://alt-web.blogspot.com/2015/07/server-side-includes-with-php.html

Hope that helps. Post back if you have more questions.

Nancy O'Shea— Product User & Community Expert

O

osgood_

Brainiac

Instead, use Server-Side Includes (SSIs ) for sitewide navigation that appears on all pages.

By @Nancy OShea

That's not what the OP asked about. They are trying to recreate the functionality of a frameset only using more modern workflows. I'm not sure where SSI or Ben's off canvas navigation fit in. The only way l know is to either load the content or create a single page application, both of which have their own associated issues. I guess you could use SSI for loading the content based on some parameters passed in a navigation onclick event as an alternative to using the fetch api but it will result in a page refresh which is what the OP is presumably trying to avoid.

Nancy OShea

Community Expert

That's not what the OP asked about.
By @osgood_

==========

Inexperienced site owners often don't know what questions to ask. If they did, they never would have used FRAMES.

I can think of only one reason for embracing a FRAMED website and that's for consistency. The idea of having the same sitewide navigation, header & footer surrounded by unique content seemed like a good idea at the time. But as we learned later, it came at considerable penalty to site owners & visitors alike.

Fast forward to 2024, Server-side Includes achieve roughly the same advantages without the penalties of FRAMES.

I think it's a good option, whether or not the OP asked for it.

Nancy O'Shea— Product User & Community Expert

O

osgood_

Brainiac

In it's very simplest of forms you can use the 'fetch' api to load the page content into a <div> container.

Create the pages you wish to 'load' into the <div> container. i.e. about.html, contact.html. Make sure these pages only include the necessary html required. You dont want the doctype, meta information etc as these already exist in the page where the html content will be 'loaded'

In the page where you want the content to be loaded add an onclick function to each of your navigation links - include the page name you want to 'load' between the () brackets:

<a href="#" onclick=fetchPage('about.html')>About</a>

<a href="#" onclick=fetchPage('contact.html')>Contact</a>

Add a <div> to the page with the class of 'pageContent' where you would like the content to appear:

Add the below script to your page, at the end, directly before the closing </html> tag:

<script>
async function fetchPage(page) {
let response = await fetch(page);
document.querySelector('.pageContent').innerHTML = await response.text();
}
</script>

As I said this is basic content 'loading' - it will not change the page title, keywords etc - the meta information. You can't supply a link and have it go directly to that particular page, the link will always go to the default page initially. There are more complex ways to overcome these issues if it is of importance by building a single page application (SPA) which is beyond the scope of this forum.

BenPleysier

Community Expert

To add to @osgood_'s reply, you need to cater for users with assistive technologies, as well as search enigine bots.

The 'href' attribute specifies the URL that the link should navigate. If the 'href' attribute value is set to '#' the link does not have a specific destination. To overcome this, it is better to code the links as follows:

<a href="about.html" onclick="return fetchPage('about.html')">About</a>

In this version, the 'href' points directly to the 'about.html' page. The 'onlick' function will execute first, and if it returns 'true', the browser will follow the link to the specified page.

For more, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a which says

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

O

osgood_

Brainiac

You would not really want a search engine to find a partial page that is 'loaded' as its meaningless, its only likely to contain limited information, probaby not enough to be that useful to the user?

I think in this case, as they aren't real links then buttons styled to look like a link, as the information suggests, would be a better solution.

BenPleysier

Community Expert

Using Bootstrap 5.3 makes this an easy task as can be seen in this video

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded