有什么(最佳)方法可以从模块中获取脚本模块的 DOM 元素吗?

问题描述 投票:0回答:1

我有以下内容:

<script type="module">

// some code here to get the <script>'s DOM reference

</script>

可以吗?

可能有任何类似的数字脚本。我想在脚本后面插入 HTML,而不需要明确的引用。

javascript es6-modules
1个回答
0
投票

您可以使用经典的

<script>
来定义一些全局变量,然后依靠
<script type="module">
defer
default这一事实,这意味着它们将在所有文档完全解析后按顺序执行,但在
DOMContentLoaded
发射之前。

此代码只是为了让您大致了解如何执行此操作,而无需通过一些

data-
属性向脚本标记提供显式标识符,然后您可以在其上运行
document.querySelector

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <script>
            var counted = 1
            var script = null
        </script>
        <p>content before first module script</p>
        <script type="module">
            document.addEventListener('DOMContentLoaded', () => {
                console.log('content loaded')
            })
            script = document.scripts[counted++]
            script.insertAdjacentHTML('afterend', `<p>inserted after ${counted - 1} module script</p>`)
            console.log(script)
        </script>
        <p>content after first module script</p>
        <script type="module">
            script = document.scripts[counted++]
            script.insertAdjacentHTML('afterend', `<p>inserted after ${counted - 1} module script</p>`)
            console.log(script)
        </script>
        <p>content after second module script</p>
        <script type="module">
            script = document.scripts[counted++]
            script.insertAdjacentHTML('afterend', `<p>inserted after ${counted - 1} module script</p>`)
            console.log(script)
        </script>
        <p>content after third module script</p>
    </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.