Find the div containing the current script

Question

Possible Duplicate:
How may I reference the script tag that loaded the currently-executing script?

I am trying to make a javascript function that includes a html doc on a page via AJAX, as a way of making a PHP-esque include() with no serverside interaction. I want the script to include the file at the location on the page the function is called from. Here's my function (assuming ajax is a valid xmlhttp object):

function include(src, elem){
    ajax.open('GET', src, false);
    ajax.send(null);
    elem.innerHTML = ajax.responseText;
}

So this would print the contents of "src.html" in the div when it is clicked:

<div onclick="include('src.html', this);"> </div>

But I want it to load when the page does. Considering there is no onload event for divs I have to include the script in the div, which is fine:

<div id=write>
    <script>include('src.html', this);</script>
</div>

But then the script has no reference to the div it is called from. Sure I could put an id on the div and pass that to the function, but I don't want to. I want to be able to call this from any unidentified element. Any ideas?

Yeah I'm trying to avoid jQuery simply so this can be standalone — Abraham Brookes, Sep 07 '12 at 00:24
related: [How may I reference the script tag that loaded the currently-executing script?](http://stackoverflow.com/questions/403967/how-may-i-reference-the-script-tag-that-loaded-the-currently-executing-script) — Bergi, Nov 27 '12 at 21:47

nnnnnn · Answer 1 · 2012-09-07T00:06:44.480

You could change your div (or other element(s)) to use a data- attribute to specify what script to run:

<div data-include="src.html"></div>

And then run a script onload of the page (or in a script block just before the closing </body> tag) that finds all elements with that attribute.

var elements = document.querySelectorAll("[data-include]");
for (var i = 0; i < elements.length; i++)
    include(elements[i].getAttribute("data-include"), elements[i]);

Here's a demo of the above (with a dummy include() function that just puts the required source url string in the element rather than doing Ajax, but it shows the elements are selected correctly): http://jsfiddle.net/nnnnnn/gm2LN/

For simplicity I've used querySelectorAll() to select the elements, but note that it isn't supported in IE7 and older. But obviously you can substitute whatever other element selection method you like if you want or need to support older browsers.

Yes you're on to something there, I think I have it now... – Abraham Brookes Sep 07 '12 at 00:33 — Abraham Brookes, Sep 07 '12 at 00:33

Bergi · Answer 2 · 2012-09-07T00:04:59.257

When the page is loaded, all scripts will be executed sequencially, as soon as they are parsed. Therefore, you just need to get the last script that is apparent in the DOM to get the currently executed script:

var script = document.scripts[document.scripts.length-1];
ajax(url, function successCallback(html) {
    script.insertAdjacentHTML("afterend", html);
});

(Demo to test - notice that document.scripts needs FF 9+)

However, I see no reason not to use serverside include().

Petar Sabev · Answer 3 · 2012-09-06T23:59:14.410

0

Here:

<div id=write>
    <script>include('src.html', this);</script>
</div>

"this" points to the window object. I think of putting an id to the script element and doing something like this:

<div id=write>
    <script id='test'>include('src.html', document.getElementById('test').parentNode);</script>
</div>

Now elem in "include" function will point to the div containing the script element. In this case you are still relying on id but not on the div's side

edited Sep 06 '12 at 23:59

answered Sep 06 '12 at 23:53

Petar Sabev

848
6
12

The OP asked for a solution not using an `id` on the `div`. Btw, why do you reference the `parentNode` of the script instead of just using `getElementById("write")`? – Bergi Sep 06 '12 at 23:59
Yes, you are right, but I suppose here that it is easier to put the id on the script tag(maybe it is defined in one place and the div in another) – Petar Sabev Sep 07 '12 at 00:02
This is a solution, but it still involves IDing something, which I don't want to do for the sake of useability – Abraham Brookes Sep 07 '12 at 00:40

Abraham Brookes · Accepted Answer · 2012-09-07T01:01:55.300

nnnnnn was on the money, but I modified it ever so softly. I ended up making an include tag with a src attribute. On pageload I loop through all the "include" tags and fill them with the data from their src attribute:

function include(src, elem){
    ajax.open('GET', src, false);
    ajax.send(null);
    elem.innerHTML = ajax.responseText;
}

window.onload = function(){
    var includes = document.getElementsByTagName('include');

    for(var i = 0; i <= includes.length; i++){
        var elem = includes[i];     
        var src = elem.getAttribute('src');
        include(src, elem);
    }

}

Then anywhere I want to include a html file I just include my custom element:

<include src='includeme.html'> </include>

In practice this produces a bit of popup but for my application that's fine.

Thanks for the help!

_"In practice this produces a bit of popup"_ - You might be able to improve this a little by taking the code out of the onload handler and instead put it in a script block at the end of the body. Using onload should wait for all images to load, but a script block at the end will execute before that... — nnnnnn, Sep 07 '12 at 01:16

Find the div containing the current script

4 Answers4