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

Question

我正在编写一个 Javascript 文件，它将成为网页中的一个组件。我希望它易于使用 - 只需在您的页面中引用脚本文件，它就在那里。然而，为此有一个复杂的问题——Javascript 生成的 HTML 应该放在哪里？一种方法是要求页面中的占位符元素具有固定的 ID 或类或其他内容。但这是一个额外的要求。如果在放置脚本的位置生成 HTML 会更好(或者，如果脚本放在头部，则在主体的开头)。此外，为了实现额外的可定制性，如果找到固定 ID，HTML 将放置在该占位符内。

所以我想知道 - 如何检测我的脚本在页面中的位置？我如何将 HTML 放在那里？ document.write() 浮现在脑海中，但那是 documented因为非常不可靠。如果脚本在头部也无济于事。更不用说如果我的脚本通过某些 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);

我只是在 body 元素中的任意位置添加一个 script 元素(如有必要，可以添加多次)以包含它...

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

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

基本上，我们首先检查 document.currentScript , 这只是 Firefox 但仍然有用(如果它成为标准化和/或其他浏览器实现它，它应该是最可靠和最快的)。

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

然后我向后迭代 script 元素(因为在解析顺序中最后一个 script 元素应该是当前正在执行的 script)，比较我们所知道的文件名被称为。您可以跳过此步骤，但我这样做是为了安全起见。