JS модуль импорта и запуска при загрузке страницы - PullRequest
Новая
       20

JS модуль импорта и запуска при загрузке страницы

1 голос
/ 05 апреля 2020

Я хочу вызвать мою функцию main (), используя html событие onload и текст console.log, импортированный из другого файла (generateObject. js), но когда я импортирую функцию, событие onload перестает работать и функция main () больше не используется.

html: 

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="main.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body onload="main()">
  </body>
</html>

generateObject. js: 

export function hello() {
    return "Hello";
}

main. js: 

import { hello } from './generateObject.js';
function main(){
      console.log(hello());
}

main();

Когда я пытаюсь использовать console.log ("text") в main (), он работает, но когда я пытаюсь использовать импортированную функцию, это не так. Что я должен сделать, чтобы это исправить?

Ошибки в консоли Chrome:

Uncaught SyntaxError: Невозможно использовать оператор импорта вне модуля (main. js: 1)

index. html: 8 Uncaught ReferenceError: main не определена при загрузке (index. html: 8)

Ответы [ 3 ]

1 голос
/ 05 апреля 2020

модулей будут иметь собственную область применения. Они не доступны в глобальной области видимости, как обычные сценарии. Так что в вашем случае он доступен только внутри main.js.

Чтобы это работало, вам нужно явно добавить его в глобальную область видимости. 

import { hello } from './generateObject.js';
function main(){
      console.log(hello());
}

window.main = main;

В качестве альтернативы вы можете удалить обработчик событий из HTML и добавьте его в файл JS.

html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="main.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body>
  </body>
</html>

main. js

import { hello } from './generateObject.js';
function main(){
      console.log(hello());
} 

window.addEventListener('load', main)
1 голос
/ 05 апреля 2020

generateObject. js: 

export function hello() {
    return "Hello";
}

main. js: 

import { hello } from './generateObject.js';
function main(){
      console.log(hello());
} 

main();

Рабочий пример

0 голосов
/ 05 апреля 2020

Вы должны добавить в конце main. js вызов основной функции. Попробуйте написать main(); внизу файла.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...