关于javascript：找到包含当前脚本的div


Find the div containing the current script

本问题已经有最佳答案，请猛点这里访问。

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

我正试图通过Ajax在页面上创建一个包含HTML文档的javascript函数，作为一种不需要服务器端交互就可以生成类似php的include()的方法。我希望脚本在调用函数的页面上的位置包含文件。以下是我的函数(假设Ajax是有效的xmlHTTP对象)：

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

因此，当单击"src.html"时，它将在DIV中打印其内容：

1
 

但我希望在页面加载时加载它。考虑到div没有onload事件，我必须在div中包含脚本，这很好：

1
    include('src.html', this);

但是脚本没有引用它从中调用的DIV。当然，我可以在DIV上放置一个ID并将其传递给函数，但我不想这样做。我想能够从任何未知元素调用这个。有什么想法吗？

相关讨论

您可以将DIV(或其他元素)更改为使用data-属性来指定要运行的脚本：

1
 

然后运行一个脚本onload页面(或在脚本块中，刚好在关闭标记之前)，该标记查找具有该属性的所有元素。

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

下面是上面的一个演示(使用一个虚拟的include()函数，该函数只将所需的源URL字符串放入元素中，而不执行Ajax，但它显示了元素选择的正确性)：http://jsfiddle.net/nnnnnn/gm2ln/

为了简单起见，我使用了querySelectorAll()来选择元素，但请注意，IE7和更旧版本不支持它。但是很明显，如果您想要或需要支持旧的浏览器，您可以替换任何其他元素选择方法。

相关讨论

nnnnnn靠的是钱，但我修改得很温柔。我最后制作了一个带有src属性的include标签。在pageload上，我循环遍历所有"include"标记，并用来自其src属性的数据填充它们：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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);
    }

}

然后在我想要包含HTML文件的任何地方，我只包含我的自定义元素：

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

实际上，这会产生一点弹出窗口，但对于我的应用程序来说，这是可以的。

谢谢你的帮助！

相关讨论

在这里：

1
    include('src.html', this);

"this"指向窗口对象。我想把一个ID放到脚本元素中，然后这样做：

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

现在，"include"函数中的elem将指向包含脚本元素的DIV。在这种情况下，您仍然依赖于ID，但不依赖于DIV。

相关讨论

当页面被加载时，所有的脚本都将在被解析后被连续执行。因此，您只需获取最后一个在DOM中显而易见的脚本，就可以获得当前执行的脚本：

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

(演示测试-请注意，document.scripts需要FF 9+)

但是，我认为没有理由不使用serverside include()。