Description:

This is another template-loading experiment. In the first experiment, I was loading data from <template> tags that were located inside the same HTML file. This experiment is different because we are loading external HTML files to an iframe first, then loading data from inside of <template> tags. To understand how it works, take a look at the files involved in the image below.

The file you're reading now is named "index.html" and it contains an iframe which initially loads the file "iframe-template-content.html". The background color of that page is colored yellow so you can see it when it loads inside of the iframe. For demonstration purposes, the iframe is also highlighted with a dotted outline so you can see where it is located on the page. When you click the Page 1, Page 2, and Page 3 buttons above, you're loading template data from the "iframe-template-content.html" file.

If you click the "Switch Template Source" button it loads a new file in the iframe ("iframe-template-alt-content.html"). This file uses a different background color so you can see it when it loads in the iframe. The file contains different template tag data so, when you click the Page 1, Page 2, and Page 3 buttons you'll see different template data being loaded. Clicking the "Switch Template Source" button again will load the original HTML file ("iframe-template-content.html"). After this happens, the Page 1, Page 2, and Page 3 buttons will load the original tempate data again.

If I was using this method on an actual site, I would hide the iframe by making it small (1 px by 1px) and not show the outline. I'd also set the background color of the template pages to be white so they would blend into the background of the index.html page. If you did the CSS styling in this way, the end-user wouldn't even see the iframe or the files being loaded into the iframe. Using this method, you could load different template source files instead of including all the <template> tags in a single document.

The primary purpose of doing this would be to make the template files smaller. One app I was working on had a lot of data hidden in <template> tags. The file size was starting to get quite large and it was getting difficult to edit data inside the templates. By dividing the templates into multiple HTML files, it made the files smaller and it became easier to to find the specific data templates that I wanted to edit.

You can download this code and play around with it here: experiment2.zip