我正在编写一个 Javascript 文件,它将成为网页中的一个组件。我希望它易于使用 - 只需在您的页面中引用脚本文件,它就在那里。然而,为此有一个复杂的问题——Javascript 生成的 HTML 应该放在哪里?一种方法是要求页面中的占位符元素具有固定的 ID 或类或其他内容。但这是一个额外的要求。如果在放置脚本的位置生成 HTML 会更好(或者,如果脚本放在头部,则在主体的开头)。此外,为了实现额外的可定制性,如果找到固定 ID,HTML 将放置在该占位符内。
所以我想知道 - 如何检测我的脚本在页面中的位置?我如何将 HTML 放在那里? document.write()
浮现在脑海中,但那是 documented因为非常不可靠。如果脚本在头部也无济于事。更不用说如果我的脚本通过某些 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
的 path 部分。
然后我向后迭代 script
元素(因为在解析顺序中最后一个 script
元素应该是当前正在执行的 script
),比较我们所知道的文件名被称为。您可以跳过此步骤,但我这样做是为了安全起见。
关于javascript - 是否可以在脚本位置可靠地插入 HTML 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7988896/