是否有可能在script's位置可靠地插入HTML元素?

Is it possible to reliably insert a HTML element at script's location?

本文关键字：插入 HTML 元素 位置 有可能 script 是否      更新时间：2023-09-26

我正在写一个Javascript文件，这将是一个网页组件。我想它是简单的使用-只是在你的页面引用脚本文件，它就在那里。然而，为了达到这个目的，有一个复杂的问题——Javascript生成的HTML应该放在哪里?一种方法是要求页面中的占位符元素具有固定的ID或类或其他内容。但这是一个额外的要求。最好是在放置脚本的位置生成HTML(或者，如果脚本位于头部，则在body的开始位置)。此外，为了获得额外的可定制性，如果找到了固定ID，则HTML将放在该占位符中。

所以我想知道-我如何检测我的脚本在页面中的位置?如何在那里放置HTML ?我想到了document.write()，但它被证明是非常不可靠的。如果脚本在头部，它也没有帮助。更不用说如果我的脚本通过一些AJAX调用动态加载会发生什么，但我认为这可以作为不受支持的场景。

我正在用这段代码做…

// 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的路径部分。

然后我在script元素上向后迭代(因为在解析顺序中，最后一个script元素应该是当前执行的script)，将文件名与我们知道的文件名进行比较。你可以跳过这个，但我这样做是为了安全。

文档。write是非常可靠的，如果你指定使用(默认SharePoint 2010页面使用它6次)。如果放置在头部，它将在body元素之后立即写入内容。诀窍是构建一个HTML字符串并一次编写它，不要编写半格式的HTML片段。

另一种方法是在文档加载时使用document.getElementsByTagName('script')，并假设最后一个是当前脚本元素。然后你可以查看父元素，如果它是head，使用load或DOM ready事件将你的元素添加到body之后。否则，只需在适当的脚本元素之前或之后添加它。

相关文章：