javascript - 查找包含当前脚本的div

Question

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

我正在尝试创建一个 JavaScript 函数，通过 AJAX 在页面上包含 html 文档，作为创建 PHP 式的 include() 且无需服务器端交互的方法。我希望脚本将文件包含在调用函数的页面位置处。这是我的函数(假设 ajax 是有效的 xmlhttp 对象):

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

因此，当单击时，这将在 div 中打印“src.html”的内容:

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

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

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

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

Answer 1

您可以更改您的 div(或其他元素)以使用 data-属性指定要运行的脚本:

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

然后运行页面的脚本加载(或在结束 </body> 标记之前的脚本 block 中)，以查找具有该属性的所有元素。

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()选择元素，但请注意它 isn't supported in IE7和年纪大了。但显然，如果您想要或需要支持旧版浏览器，您可以替换您喜欢的任何其他元素选择方法。