查找包含当前脚本的 div [重复]

Question

可能重复：
How may I reference the script tag that loaded the currently-executing script?

我正在尝试通过 AJAX 在页面上创建一个包含 html 文档的 javascript 函数，作为一种无需服务器端交互的 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

nnnnnn 很赚钱，但我对它进行了如此轻柔的修改。我最终制作了一个带有 src 属性的包含标签。在页面加载时，我会遍历所有“包含”标签，并用它们的 src 属性中的数据填充它们：

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 文件的地方，我只包含我的自定义元素：

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

实际上，这会产生一些弹出窗口，但对于我的应用程序来说这很好。

感谢您的帮助！

Answer 2

您可以更改您的 div（或其他元素）以使用 data- 属性来指定要运行的脚本：

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

然后运行页面的加载脚本（或在关闭 </body> 标记之前的脚本块中）找到具有该属性的所有元素。

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 和更早版本。但显然，如果您想要或需要支持旧版浏览器，您可以替换任何其他您喜欢的元素选择方法。

Answer 3

当页面被加载时，所有的脚本将被顺序执行，一旦它们被解析。因此，您只需要获取 DOM 中显示的最后一个脚本即可获取当前执行的脚本：

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

（Demo to test - 注意document.scripts 需要 FF 9+）

但是，我认为没有理由不使用服务器端 include()。

Answer 4

这里：

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

“this”指向窗口对象。 我想把一个 id 放到 script 元素中，然后做这样的事情：

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

现在 "include" 函数中的 elem 将指向包含脚本元素的 div。在这种情况下，您仍然依赖 id 而不是 div 方面