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

发布于 2024-12-13 12:43:53 字数 519 浏览 0 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

提赋 2024-12-20 12:43:53

我正在使用这段代码执行此操作...

// 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），将文件名与我们所知道的就是我们的。您也许可以跳过此步骤，但为了安全起见，我这样做。

I am doing that with this code...

// 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;
        }
    }
}

Then, to add your element, it's simple as...

currentScript.parentNode.insertBefore(newElement, currentScript);

I simply add a script element anywhere (and multiple times if necessary) in the body element to include it...

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

Ensure the code runs as is, not in DOM ready or window's load event.

Basically, we first check for document.currentScript, which is Firefox only but still useful (if it becomes standardised and/or other browsers implement it, it should be most reliable and fastest).

Then I create a generic a element to exploit some of its functionality, such as extracting the path portion of the href.

I then iterate backwards over the script elements (because in parse order the last script element should be the currently executing script), comparing the filename to what we know ours is called. You may be able to skip this, but I am doing this to be safe.

回复收藏 0 原文

七分※倦醒 2024-12-20 12:43:53

如果按照您指示的方式使用，document.write 非常可靠（默认的 SharePoint 2010 页面使用它 6 次）。如果放置在 head 中，它将立即将内容写入 body 元素之后。诀窍是构建单个 HTML 字符串并一次性编写它，不要编写半格式的 HTML 片段。

另一种方法是在文档加载时使用 document.getElementsByTagName('script') 并假设最后一个是当前脚本元素。然后，您可以查看父级，如果它是 head，请使用 load 或 DOM 就绪事件在主体后面添加元素。否则，只需根据需要将其添加到脚本元素之前或之后。