Любой (оптимальный) способ получить элемент DOM модуля сценария из модуля?

У меня есть следующее:

<script type = "module">

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

</script>

Является ли это возможным?

Подобные числовые сценарии могут быть любыми. Я хотел бы вставить HTML после сценария без явной ссылки.

Is it possible? кажется, нет. Это имеет значение?
Jaromanda X 16.04.2024 11:20

@JaromandaX я бы хотел вставить HTML после сценария без явной ссылки

Alexander Nenashev 16.04.2024 11:21
document.currentScript не работает для модулей, MDN предлагает «вместо этого использовать import.meta». Но при этом вы можете получить только url элемента скрипта (который теоретически вы могли бы использовать, чтобы попытаться выбрать элемент, используя селектор атрибутов), но для встроенных скриптов это вернет только URL-адрес самого внедряемого документа.
CBroe 16.04.2024 11:30

Думаю, вам понадобится явная ссылка: p

Jaromanda X 16.04.2024 11:35

Мне кажется, это правильный вопрос: почему кто-то хочет его закрыть?

Konrad 16.04.2024 11:45

Хотя вопрос уже актуален, вы можете улучшить его, приведя несколько примеров случаев использования, которые нелегко решить с помощью другого подхода. (Не уверен, является ли это проблемой XY — вероятно, нет, для этого Y определенно есть допустимое использование, но вы все равно должны указать X)

Bergi 16.04.2024 11:50

Возможно, также стоит указать, нужно ли вам это делать только из «основного» модуля или также из его зависимостей, и если да, то что должно произойти, когда одна такая зависимость уже загружена предыдущим модулем. (Примечательно, что даже «основной» модуль уже мог быть загружен зависимостями другого скрипта)

Kaiido 16.04.2024 14:21

@Kaiido, кажется, нет простого способа справиться с этим. я бы сказал, что во встроенном модуле может быть глобальная функция. он мог бы каким-то образом извлекать переменные из скриптов и сравнивать их с локальными переменными с тем же именем и определять, какой скрипт содержит локальные... в любом случае, я думаю, я нашел другой подход, но сам вопрос и предложения в комментариях интересны

Alexander Nenashev 16.04.2024 14:25

Так может быть, вы могли бы хотя бы сузить свой вопрос до сценариев встроенных модулей? Потому что из внешних я не думаю, что это когда-нибудь будет возможно (если не считать построения собственного графа модулей). Из встроенного вы можете, например, вставить псевдослучайный комментарий в свой скрипт и искать этот комментарий в уценке, чтобы найти правильный элемент.

Kaiido 16.04.2024 14:30

@Кайидо, да, я знаю, что могу дать ключ. думал, что можно обойтись и без этого

Alexander Nenashev 16.04.2024 14:31

Немного литературы: github.com/whatwg/html/issues/1013

Kaiido 16.04.2024 14:40
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
11
124
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать классический <script>, чтобы определить некоторые глобальные переменные, а затем полагаться на тот факт, что <script type = "module">откладывают по по умолчанию, то есть они будут выполняться по порядку после того, как весь документ будет полностью проанализирован, но до того, как DOMContentLoaded запустится. .

Этот код предназначен только для того, чтобы дать вам общее представление о том, как вы можете это сделать, не предоставляя явных идентификаторов тегам вашего скрипта через некоторый атрибут data-, который вы затем можете использовать document.querySelector.

Пример репозитория на GitHub.

ПРИМЕЧАНИЕ. Вам нужно просто скопировать/вставить то, что находится в фрагменте, и запустить его на веб-сервере, чтобы увидеть, как он работает, или посмотреть это на страницах GitHub . Я думаю, что среда сниппетов не полностью поддерживает ES-модули.

<!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">
            script = document.scripts[counted++]
            script.insertAdjacentHTML('afterend', `<p>inserted after ${counted - 1} module script</p>`)
        </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>`)
        </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>`)
        </script>
        <p>content after third module script</p>
    </body>
</html>

не идеально, но определенно заслуживает награды

Alexander Nenashev 21.04.2024 21:01

Не идеально, если можно так выразиться, но спасибо, что приняли.

morganney 21.04.2024 21:04

Другие вопросы по теме