Inspiring

Question

Simulate a Frame build site in HTML5

Forum|Forum|1 year ago
March 3, 2024
3 replies
2418 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_

Legend

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.

BenPleysier

Community Expert

I'm not sure where SSI or Ben's off canvas navigation fit in.

By @osgood_

I guess that a bit of handholding never hurt anyone. So here goes.

This is the layout page that has a section that imports the content from the content pages. The layout page does not get refreshed, the content is dynamic. No this is not a SPA. It does make use of SSI using NodeJS/Express (JavaScript)

This is as close as you can get to imitating the frameset, using modern methods.

The only way l know is to either load the content or create a single page application

By @osgood_

Time to catch up!

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

O

osgood_

Legend

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_

Legend

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