Sharing HTML between topics—advanced method

Topic status automatically displays here - do not remove.

Bookmark me! Bookmark this topic Print me! Print this topic

The ability to share HTML content between topics without duplication allows for an effective single source location for the content, and for it to be shared and used in multiple locations by multiple HTML documents.

The trick is to use a hidden inline frame element (iframe) on the destination page to retrieve the source topic, then use script to extract the relevant section out of the framed document and display it where required.

The basic method is described in Jump across to separate topic basic method. It requires a separate iframe for each separate topic you wish to access data from, each with its own individual name, and a separate script for each copy function on each page.

The more advanced method (described below) brings the common elements of the basic method together to use a single iframe element and some advanced scripting to dynamically load and unload separate topics as required, copying out and duplicating sections from each topic as required.

To share HTML between topics—advanced method

On the destination page, insert a hidden iframe element out of the way, like at the very bottom (just before the closing HTML tag), name it for identification, size it to nothing, however do not provide a source file name:
```
<iframe class="hidden" id="FrameWork" src="" style="width: 0px; height: 0px"></iframe>
```
This object is hidden because it is not used to display the source file, only as a framework to temporarily hold the source file whilst its content is copied to elsewhere on the destination page.
The source parameter is dynamically filled by script, so is not necessary for permanent allocation.
Create a separate JavaScript file to contain the advanced script, and insert the following script:

COL: Up to here.*****************************************************************
The 'fnInitialiseFrameWork' function associates the 'onreadystatechange' event of the iframe object 'FrameWork' with the 'fnTestStatus' function. This event is triggered and called whenever the onready state of the 'FrameWork' is fired as a file is loaded into the iframe. There are actually several states which can fire this event, however, only the final 'completed' state is used to further trigger the duplication process (copying of pre-named sections). This script requires the 'fnInitialiseFrameWork' function be listed in the display page onload event to trigger the source file loading and subsequent section duplication process: And of course, a link to this script file is also required on the display page:

On the same page, in the header, insert the script necessary to perform the duplication work:

<script type="text/javascript">
 This script also expects that the 'FrameWork' iframe object preexists on the display topic, and that a script section detailing the source files, sections, and destinations are listed properly. The named sources and destinations could be either divs or spans, but must match name and type. It does not check whether the named source file and sections, or destinations exist in the topics. It does a simple check that the number of listed source sections does match the number of destinations. Sample required script section for display page (placed inside header). These listed items will need to be customised (where indicated) to suit the number and name of the source files and sections, and display page destinations: */ //create and initialise global tracker to monitor display progress var ProgressFileCount = 0px; var ProgressComplete = false; function fnInitialiseFrameWork() {//called from page onload event //check script lists for miscount fnErrorCheckNumberOfSources(); //alert("Initialising FrameWork"); //initialise and associate object status change notification document.all.FrameWork.onreadystatechange=fnTestStatus; //load first source file to trigger state change and subsequent duplication fnLoadNextTopic(); } function fnErrorCheckNumberOfSources() {//called from fnInitialiseFrameWork //alert("Performing Error check script"); //declare common message strings var msg; var msgNotice = "NOTICE: An error has been detected in the script! \n\n"; var msgCondition = "does NOT match \n"; var msgRemedy = "These values need to be readjusted \nin the HTML script section.\n\n"; var msgApology = "Sorry, but this page may not subsequently \ndisplay as designed."; //iterate through all nominated source file groups for (var SourceFileCount = 1; SourceFileCount <= (aryMatches['SourceFile'].length - 1); SourceFileCount ++) { //msg = "Current file " + aryMatches['SourceFile'][SourceFileCount]; //msg += " (" + SourceFileCount + " of " + (aryMatches['SourceFile'].length - 1) + ")"; //alert(msg); //check nominated number against listed source counts if (aryMatches['NumberOfSourcesInUse'][SourceFileCount] != (aryMatches['SourceSections'][SourceFileCount].length - 1)) { msg = msgNotice; //reinitialises the message string msg += "With the source file (" + aryMatches['SourceFile'][SourceFileCount] + "),\n"; msg += "the nominated number of Sources (" + aryMatches['NumberOfSourcesInUse'][SourceFileCount] + ")\n"; msg += msgCondition; //inserts common message error condition string msg += "the count of listed Sources (" + (aryMatches['SourceSections'][SourceFileCount].length - 1) + ").\n"; msg += msgRemedy + msgApology; //appends common message strings alert(msg); } //check number of listed sources against number of listed destinations if ((aryMatches['SourceSections'][SourceFileCount].length) != (aryMatches['Destinations'][SourceFileCount].length)) { msg = msgNotice; //reinitialises the message string msg += "With the source file (" + aryMatches['SourceFile'][SourceFileCount] + "),\n"; msg += "the count of listed Sources (" + (aryMatches['SourceSections'][SourceFileCount].length - 1) + ")\n"; msg += msgCondition; //inserts common message error condition string msg += "the count of listed Destinations (" + (aryMatches['Destinations'][SourceFileCount].length - 1) + ").\n"; msg += msgRemedy + msgApology; //appends common message strings alert(msg); } } } function fnTestStatus() {//called whenever the iframe status is ready //this fires for any change in status //alert("Testing FrameWork Status"); //test whether iframe status is complete (file is fully loaded) if (document.all.FrameWork.readyState == "complete") {//ready to copy sections over to main document //check progress to prevent unnecessary copy action if (! ProgressComplete) { //copy source sections from currently loaded source file to destinations fnCopySections(); } } else {//current readystate is not "complete" //var msg = "TestFrame status is " + document.all.FrameWork.readyState + "."; //alert(msg); } } function fnLoadNextTopic() { //determine if there is another source file to load next if (ProgressFileCount < aryMatches['SourceFile'].length - 1) { //increment progress counter ProgressFileCount ++; //var msg = "Current file " + ProgressFileCount + " of " + (aryMatches['SourceFile'].length - 1); //msg += "\nLoading topic " + aryMatches['SourceFile'][ProgressFileCount] + "."; //alert(msg); //load source file document.all.FrameWork.src = aryMatches['SourceFile'][ProgressFileCount]; } else {//finished //unload source file document.all.FrameWork.src = ""; } } function fnCopySections() {//copies the text where required to prevent source duplication //alert("Copying Sections"); //create local variables var source; var destination; //copy source sections to destinations for (var count = 1; count <= aryMatches['NumberOfSourcesInUse'][ProgressFileCount]; count ++) { source = aryMatches['SourceSections'][ProgressFileCount][count]; destination = aryMatches['Destinations'][ProgressFileCount][count]; //var msg = "Source = " + source + ".\nDestination = " + destination + "."; //msg += "\nNumber of Sources = " + aryMatches['NumberOfSourcesInUse'][ProgressFileCount] + ". "; //msg += "Current count = " + count + ". "; //alert(msg); //perform the actual duplication copy eval(destination + '.innerHTML = document.frames("FrameWork").' + source + '.innerHTML'); //calculate file progress if (ProgressFileCount == aryMatches['SourceFile'].length - 1) {//at last source file //alert("Progress at last source file"); //calculate section progress if (count == aryMatches['NumberOfSourcesInUse'][ProgressFileCount]) {//at last section to be copied //set completed flag ProgressComplete = true; //alert("Progress Completed"); } } } //load next sourcefile to trigger state change fnLoadNextTopic(); } </script>

Still on the same page, insert the onload command to the Body section:
```
<body onload="DuplicateText();">
```
Now comes the tricky part. You will need to insert divisions in both the source file—wrapping the source section, and in the destination file—where you want the source to display. You then need to identify these divisions accordingly, so that the script can locate and use them. In this example, I used "Source" and "Destination" (see, I told you it was tricky!)
On the source page:
```
<div id="Source">This is the source text which gets duplicated</div>
```
Back on the destination page again:
```
<div id="Destination">Duplicate text goes here</div>
```

The section being duplicated can be as long or short as is required, and containing HTML tags. If inline text is all that is being duplicated, and not HTML elements, you could use span tags instead of divisions.

Sharing HTML between topics—advanced method

See Also