• content
• navigation
• access
• search

---

Import HTML extension

Version 1.02

The Import HTML extension allows you to use an embedded HTML document as your menu data source. Thanks to Jason Davis for this idea.

View the demo to see it in action. It works by loading a document into an <iframe> or <object>, and using data from that to populate the menus on the main page.

• Installation
• Configuration
• Object or iframe?
• Browser notes
• Accessibility notes

Installation

Download the Import HTML script, copy it into your udm-resources folder, and add the script include to the body section:

• Skip code example

<!-- import html extension -->
<script type="text/javascript"
	src="/udm-resources/udm-x-import.js"></script>

Configuration

You need to set a parameter in the script - right near the top there's a variable called um.treeID, which defines the id of the embedded <ul> you want to read:

• Skip code example

um.treeID = 'linkTree';

Then embed the data document itself, either in an <iframe>:

• Skip code example

<!-- menu data frame -->
<iframe id="udmData" width="0" height="0" frameborder="0"
	src="/udm-resources/udm-sitemap.htm"></iframe>

or an <object>:

• Skip code example

<!-- menu data object -->
<object id="udmData" type="text/html" width="0" height="0"
	data="/udm-resources/udm-sitemap.htm"></object>

You must not change the id.

Notice how the width, height and border attributes make it effectively invisible, even to legacy browsers. You can further hide it with visibility, but don't hide it with display, or the script might not be able to read data from it. This is okay:

• Skip code example

#udmData{
	position:absolute;
	visibility:hidden;
	}

The data document in this example - udm-sitemap.htm - only contains the navigation list and a heading. However it doesn't have to be like that - you can embed and extract the <ul> from any page, providing it has the specified id and is within the same domain.

The point here is data sharing - the same list HTML can be re-used in different parts of your site. For example, if you have a sitemap page where the whole tree is permanently visible, you can embed that page and use it to service the menus on other pages.

Some browsers may indicate that an <iframe> is present even though it isn't rendered. The text-browser Lynx does this, adding instead a link to the page defined in the <iframe> src. Therefore, since it might be viewed alone, it makes sense for that page to have at least a navbar heading, and a self-descriptive filename.

But however much or little code is in the embedded page, it must be a complete HTML document - you cannot use a text file and expect it to have a DOM!

Object or iframe?

If you use <object> it won't work in Safari, because Safari can't read the contentDocument of an <object>. You might also find that in Opera 5 and 6 the <object> doesn't fully resolve, and so the "loading.." status text is never complete. I suggest not using <object> unless you're working for a predictable user-base that doesn't include those browsers, or the issues don't concern you.

Otherwise use <iframe> which is free of such side effects, although it does restrict you to using an XHTML Transitional or earlier doctype (unless you're using Modular XHTML). Using <iframe> won't work for anyone who has their browser set to disable the rendering of iframes, or to disallow scripts from communicating between frames, but this is unlikely I think.

Browser notes

1. In Windows Internet Explorer this extension causes a slight performance hit - the onload process takes a moment before the menus are useable.
2. In Macintosh Internet Explorer this extension is not supported at all; it will only see the main navigation bar.
3. Likewise, Opera 7.1 and earlier are excluded, because the script's use of importNode was causing Linux/Opera 7.11 to crash.

Accessibility notes

Menus generated using this method are not accessible to non-javascript browsers.

• ← More extensions

Search