Question

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

我正在尝试通过AJAX在页面上创建一个包含html doc的javascript函数，作为一种在没有服务器端交互的情况下制作PHP-esque 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>标记之前的脚本块中）查找具有该属性的所有元素。

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 2

加载页面后，所有脚本将在解析后立即执行。因此，您只需要获取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 3

下面：

<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将指向包含script元素的div。在这种情况下，你仍然依赖于id而不是div的一面

Answer 4

nnnnnn上了钱，但我对它进行了如此温和的修改。我最终制作了一个带有src属性的include标签。在页面加载中，我遍历所有“include”标记，并用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>

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

感谢您的帮助！

找到包含当前脚本的div

4 个答案: