Web Design
Let the coding do thedonkey work to export external content into HTMLfiles
Your support helps us to tell the story
From reproductive rights to climate change to Big Tech, The Independent is on the ground when the story is developing. Whether it's investigating the financials of Elon Musk's pro-Trump PAC or producing our latest documentary, 'The A Word', which shines a light on the American women fighting for reproductive rights, we know how important it is to parse out the facts from the messaging.
At such a critical moment in US history, we need reporters on the ground. Your donation allows us to keep sending journalists to speak to both sides of the story.
The Independent is trusted by Americans across the entire political spectrum. And unlike many other quality news outlets, we choose not to lock Americans out of our reporting and analysis with paywalls. We believe quality journalism should be available to everyone, paid for by those who can afford it.
Your support makes all the difference.IMAGINE THAT you are designing a large website with the same menu on everypage. Every time you need to make a change to that menu, you have to goto each and every page and make the changes. Not only is thistime-consuming, the possibility of making mistakes is high.Wouldn't it be nice simply to have that menu in one file and then import itinto each page as the visitor uses the site? You could then make correctionsto one file and have the changes reflected throughout the site.
IMAGINE THAT you are designing a large website with the same menu on everypage. Every time you need to make a change to that menu, you have to goto each and every page and make the changes. Not only is thistime-consuming, the possibility of making mistakes is high.Wouldn't it be nice simply to have that menu in one file and then import itinto each page as the visitor uses the site? You could then make correctionsto one file and have the changes reflected throughout the site.
To dothis, we need a way to import external content into HTML files. There aretwo ways to do this, each with its own strengths and weaknesses. If youwant to see examples of these methods in action, or check the code, visitmy site.
The LAYER/IFRAME method
TheLAYER tag is the easiest way to place external content in an HTML document.By setting a source for this tag, it will import an HTML file and use thatcontent as if it were a part of the document itself. But this tag isavailable only with Navigator 4 (and should be supported in Navigator5), so we have to use something else to import content if the document isbeing viewed in Internet Explorer.
The IFRAME tag can place externalcontent into an HTML document, though this is treated as if it is in aseparate frame and thus will interact differently with surrounding content.In addition, some contingency must be included for visitors not using abrowser that supports LAYER or IFRAMEtags.
<HTML><BODY><LAYERSRC="external.html" TOP="10"LEFT="10">
</LAYER>
<NOLAYER>
<IFRAMESRC="external.html" FRAMEBORDER="0"MARGINHEIGHT="0" MARGINWIDTH="0"WIDTH="100%" HEIGHT="100%" >
<AHREF="external.html">
ExternalContent</A>
</IFRAME>
</NOLAYER>
</BODY>
</HTML>
Inthis example, both the LAYER and the IFRAME are importing an external filecalled (appropriately) external. html. Note, though, thatthe IFRAME is located inside a NOLAYER tag. This will prevent browsers thatsupport both LAYER and IFRAME tags from displaying the content twice. No suchbrowser yet exists, but it is possible that Navigator 5 will support bothtags. For browsers that do not support either LAYER or IFRAME tags, alink to the file is also included.
Now let's return to the subject ofthe external file being imported(external.html):
<BODY>
<H1>HelloWorld!</H1>
</BODY>
This file does not containthe regular HTML open and close tags - supplied by the main document -but only the BODY tag, and then any HTML that could be included in a regularHTML document.
One thing to remember about using this method: since theIFRAME acts like an independent frame, you have to target all links to"_top" or to the frame in which you wish the content to bedisplayed. Otherwise, these links will appear in the IFRAME.
I usethis method on my own site to place a list of articles related to the one beingread at the bottom of the page.
I maintain 14 separate "relatedarticles" files, each on a different topic. Each article will thenimport the relevant related articles file using LAYER or IFRAME. So when Iplace a new article on my site, I add a link in the appropriate relatedarticles file, and every article in the site that imports that file then getsupdated
The JavaScript Method
The SCRIPT tag can be used to import anexternal JavaScript file into an HTML document. In turn, the JavaScriptfile can be used to "write" HTML code. The advantage of using thismethod is that we can use the JavaScript to tailor the content to thebrowser. Importing an external JavaScript file is straightforward. Justadd the SRC attribute to the SCRIPT tag, and don't place anything betweenthe SCRIPT tags:
<HTML>
<BODY>
<SCRIPTLANGUAGE="JavaScript"SRC="external.js">
</SCRIPT>
</BODY>
</HTML>
Here,the file external.js is being imported. You can import as many externalJavaScript files as you want, but each one requires its own SCRIPTtag.
Now let's turn our attention to the external file(external.js):
var isLayers = 0;
var isAll =0;
var isOld = 0;
if (document.layers) {isLayers= 1}
else {if (document.all) {isAll =1}
else {isOld = 1}}
if (isLayers){
document.write(`<H1>');
document.write (`I can uselayers!');
document.write(`</H1>');}
if (isAll){
document.write(`<H1>');
document.write (`I can NOTuse layers');
document.write(`</H1>');}
if (isOld){
document.write(`<H1>');
document.write (`Maybe youshould get a newer browser');
document.write(`</H1>');}
This file tests the browsersto see whether it uses LAYERs, ALL, or none of the above, and willdeliver content accordingly. Each line of HTML code gets its own`document. write'. When opened in a browser, the browser willrender the HTML code. The drawback is that you have to place every line ofHTML code into JavaScript.
Jason Cranford Teague is theauthor of DHTML for the World Wide Web. You can find an archive of thiscolumn at WebbedEnvironments.
Join our commenting forum
Join thought-provoking conversations, follow other Independent readers and see their replies
Comments