如何从 html 页面调用在 javascript 模块 (type=module) 中声明的函数

汤玉鹏

已于 2025-02-21 16:27:50 修改

阅读量5.6k

点赞数 3

文章标签： javascript 开发语言 ecmascript

于 2023-08-03 15:04:21 首次发布

本文链接：https://blog.youkuaiyun.com/qq_27318177/article/details/132083895

版权

首先，必须明确导出您的功能

export function greet() {
  alert("Hello from module");
}

其次，模块有它自己的范围（这是模块的全部意义），因此您需要将函数添加到全局范围。因此，要做到这一点，您必须运行一个脚本来导入该函数并将其添加到窗口对象：

<script type="module">
  import { greet } from "./app.js";
  window.greetFromModule = greet;
</script>

现在你不需要这部分了<script type="module" src="app.js"></script>或者，您可以创建一个空的 obj 并将您的模块内容添加到其中，这就是它的样子：

<html>
  <head></head>
  <body>
    <button onclick="greetFromHtml();">greetFromHtml</button>
    <button onclick="module.greet()">greetFromModule</button>
    <script type="text/javascript">
      function greetFromHtml() {
        alert("Hello");
      }
      const module = {};
    </script>
    <script type="module">
      import { greet } from "./app.js";
      module.greet = greet;
    </script>
  </body>
</html>

index.html

<script type="text/javascript">
    function getPhotoImg(e){
        setPhotoImg(e);
    }
</script>

其他vue页面

<script setup>
import { getCurrentInstance } from "vue";

//绑定全局函数（可以理解为函数监听初始化）
window.setPhotoImg = function (data) {
    console.log(data);
    //在全局函数里面调用当前实例的函数方法
    getCount(data);
  }
//组件函数方法
const getCount=(data)=> {
  //直接对当前实例变量修改
};
</script>