1

可能重复：
如何引用加载当前执行脚本的脚本标签？

我正在尝试通过 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 并将其传递给函数，但我不想这样做。我希望能够从任何身份不明的元素中调用它。有任何想法吗？

4

4 回答 4

1

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

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

然后运行页面的脚本 onload（或在结束标记之前的脚本块中</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()选择元素，但请注意， IE7和更早版本不支持它。但显然，如果您想要或需要支持旧版浏览器，您可以替换您喜欢的任何其他元素选择方法。

于 2012-09-06T23:53:25.413 回答
0

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

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

（要测试的演示- 注意document.scripts需要 FF 9+）

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

于 2012-09-06T23:53:38.890 回答
0

这里：

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

“this”指向窗口对象。我想在脚本元素中添加一个 id 并执行以下操作：

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

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

于 2012-09-06T23:53:59.233 回答
0

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>

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

谢谢您的帮助！

于 2012-09-07T00:39:18.463 回答