Loading files into divs having a custom src attribute
The HTML src attribute supports frame, iframe, img, input and script elements. It does not support the div element. But HTML 5 gives us the "data" attribute that lets us define custom attributes. We can create whatever we want: <div data-brand=..., <div data-mymusic=... etc. So we can also have <div data-src=...
We can retrieve the value of the "data-" attributes by using getAttribute() and then use the output in all sorts of javascript operations. I found that we can use javascript (jquery) to load a file into a div by just applying $("#some_div").load(document.getElementById('some_div').getAttribute("data-src")) to something like <div id="some_div" data-src="some_file.html"></div>. The result will be a div that loads some_file.html.
I developed this a little bit further and created a script for loading files into divs having data-src=... and an obligatory (!!!) ID. (The custom attribute is not required if we load a file into a div using the click event, see below: usage). The script must be put after all the divs. It's best to put it immediately before the closing body tag:
<script>
function load_into_div(which_div, which_filename)
{
/* onload event: if the div has the attribute 'data-src' specifying a file name, load the file into the div (=which_div) */
if(!which_filename){$("#"+which_div).load(document.getElementById(which_div).getAttribute("data-src"))}
/* other event (click, normally): load the file represented by 'which_filename' into the div, whether or not the div has the attribute 'data-src' */
if(which_filename){$("#"+which_div).load(which_filename)}
}
/* do the onload for every div having the custom attribute data-src */
$('[data-src]').each(function() {load_into_div($(this).attr('id'));});
</script>
It's a jquery-based script, so we must put the following line in the head:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
Usage:
- If you want a div to load a file 'by itself' on page load: <div id="some_div" data-src="some_file.html"></div>, that's all. (The divs are styleable, of course).
- If you want the div to load another file 'later on': <a href="javascript: void(0)" onclick="load_into_div('some_div', 'other_file.html'); return false">load other file</a>.
The same for loading a file into a div that has not loaded anything yet because it doesn't have data-src=...
Notes:
- The js and css of the external files loaded into the divs are preserved in the divs, thanks to the jquery load method used in the script.
- You can load files (into the divs) that belong to a 'foreign origin'. But that can only be done indirectly. First you must put the 'foreign-origin-file' in some file of your own, for instance foreign.html that loads the foreign-origin-file via an iframe. Then when you load foreign.html into a div, the div automatically loads the other (foreign) file. It's best to give the iframe a width and a height, and leave the size of the div unspecified.
Of course, this is only useful if you don't just want to load the foreign-origin-file, but also something else that you put in foreign.html (besides the iframe).
- You can use this to put a menu on every page of your site:
<div id="menu" data-src="menu.html" ></div>. If you put this div on your pages (together with the script(s) that load menu.html into the div), you can modify the menu for the whole site by just updating menu.html.
Demos (reset all here):
See divs below.
Try this link to load another file into the first div below.
Try this link to load a file into this div
, which has not loaded anything yet because it doesn't have the attribute data-src=...
© Arie Molendijk, mesdomaines.nu