Как использовать модуль javascript на странице HTML во втором встроенном скрипте - PullRequest
Новая
       7

Как использовать модуль javascript на странице HTML во втором встроенном скрипте

0 голосов
/ 04 августа 2020

У меня есть JavaScript модуль mymmodule.js, экспортирующий список: 

export var mylist = ['Hallo', 'duda'];

Обычно этот модуль используется в других модулях, и это прекрасно работает. Но, кроме того, я хочу использовать экспорт (ы) модуля как есть во встроенном скрипте на странице HTML. Я попытался скопировать экспорт в объект window: 

<html>
<head>
    <script type="module">import * as mm from './mymodule.js';  window.mm = mm;</script>
</head>

<h1>MyMain</h1>
<p>
    <div id = "info">...</div>
</p>

<script type="text/javascript">
    document.getElementById('info').textContent = window.mm.mylist;
</script>            
</html>

, но в консоли появляется сообщение об ошибке «window.mm is undefined». Я попытался сослаться на mm.mylist вместо window.mm.mylist, но без лучшего результата.

Как я могу ссылаться на экспорт модуля во втором встроенном скрипте на странице HTML?

1 Ответ

0 голосов
/ 05 августа 2020

Проблема в том, что модули выполняются на том же этапе, что и сценарии с атрибутом defer] (https://javascript.info/script-async-defer#defer), т.е. после чтения страницы и выполнения JavaScript в тегах сценария.

Следовательно, когда браузер видит 

document.getElementById('info').textContent = mm.mylist

, сценарий mymodule.js не был выполнен, а объект mm еще недоступен.

Чтобы смягчить это, вам необходимо запустить код, ссылающийся на экспорт из mymodule после полной загрузки DOM, например, в событии onload: 

<html>
<head>
    <script type="module">import * as mm from './mymodule.js';  window.mm = mm;</script>
</head>

<h1>MyMain</h1>
<p>
    <div id = "info">...</div>
</p>

<script type="text/javascript">
    window.onload = function() {
        document.getElementById('info').textContent =    mm.mylist;
    }
</script>            
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...