是否可以在脚本的位置可靠地插入HTML元素？

Question

我正在写一个Javascript文件,它将成为网页中的一个组件.我希望它使用起来很简单 - 只需在页面中引用脚本文件,它就在那里.为此,有一个复杂的问题 - HTML应该在哪里生成Javascript？一种方法是要求页面中的占位符元素具有固定的ID或类或其他内容.但这是一个额外的要求.如果HTML是在放置脚本的位置生成的(或者,在主体的开头,如果脚本放在头部),那会更好.此外,为了获得额外的可自定义性,如果找到了固定ID,则HTML将放置在该占位符内.

所以我想知道 - 如何在页面中检测脚本的位置？我如何在那里放置HTML？document.write()浮现在脑海中,但这被证明是非常不可靠的.如果脚本在头部,它也无济于事.更不用说如果我的脚本通过一些AJAX调用动态加载会发生什么,但我想这可以留作不受支持的场景.

Answer 1

我正在用这段代码做到这一点...

// This is for Firefox only at the moment.
var thisScriptElement = document.currentScript,

// Generic `a` element for exploiting its ability to return `pathname`.
    a = document.createElement('a');


if ( ! thisScriptElement) {
    // Iterate backwards, to look for our script.        
    var scriptElements = document.body.getElementsByTagName('script'),
        i = scriptElements.length;

    while (i--) {
        if ( ! scriptElements[i].src) {
           continue;
        }

        a.href = scriptElements[i].src;
        if (a.pathname.replace(/^.*\//, '') == 'name-of-your-js-code.js') {
            thisScriptElement = scriptElements[i];
            break;
        }
    }
}

然后，要添加您的元素，很简单......

currentScript.parentNode.insertBefore(newElement, currentScript);

我只需script在元素中的任何位置添加一个元素（如果需要，可以多次添加）body以包含它......

<script type="text/javascript" src="somewhere/name-of-your-js-code.js?"></script>

确保代码按原样运行，而不是在 DOM 就绪或window事件中load运行。

基本上，我们首先检查document.currentScript，它仅适用于 Firefox，但仍然有用（如果它变得标准化和/或其他浏览器实现它，它应该是最可靠和最快的）。

然后，我创建一个通用元素来利用它a的一些功能，例如提取href.

然后，我向后迭代这些script元素（因为按照解析顺序，最后一个script元素应该是当前正在执行的元素script），将文件名与我们知道的文件名进行比较。您也许可以跳过此步骤，但为了安全起见，我这样做。