gpt4 book ai didi

javascript - JS 导入模块并在页面加载时运行

转载 作者:行者123 更新时间:2023-12-01 16:04:27 27 4
gpt4 key购买 nike

我想使用从另一个(generateObject.js)文件导入的html onload事件和console.log文本调用我的函数main(),但是当我导入函数时,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>
生成对象.js:
export function hello() {
return "Hello";
}
主.js:
import { hello } from './generateObject.js';
function main(){
console.log(hello());
}

main();
当我尝试 console.log("text")main()它可以工作,但是当我尝试使用导入的函数时却不行。
我应该怎么做才能解决这个问题?
Chrome 控制台中的错误:
Uncaught SyntaxError: Cannot use import statement outside a module (main.js:1)

index.html:8 Uncaught ReferenceError: main is not defined at onload (index.html:8)

最佳答案

模块将有自己的范围。它们不像普通脚本那样在全局范围内可用。所以它只能在 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)

关于javascript - JS 导入模块并在页面加载时运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61047908/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com