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

时间:2011-11-03 00:10:58

标签: javascript html dom

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

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

2 个答案:

答案 0 :(得分: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 ready或window的{​​{1}}事件中按原样运行 not

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

然后我创建了一个通用load元素来利用它的一些功能,例如提取a路径部分。

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

答案 1 :(得分:1)

如果您按照指示使用

document.write 非常可靠(默认的SharePoint 2010页面使用它6次)。如果放在 head 中,它会将内容写入body元素后面。诀窍是构建一个单独的HTML字符串并一次编写,不要写半成形HTML的片段。

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