时间戳

首页 > 解决方案 > 如何从 html 文件调用函数到 js 类型的模块文件？

javascript - 如何从 html 文件调用函数到 js 类型的模块文件？

问题描述

首先，感谢您阅读我的问题并尝试帮助我并为我的英语道歉。

我有以下问题...

我想从 html 中执行我创建的 js 文件的函数，向该文件传递两个参数：地图的名称和应加载地图的 id。但是作为一个模块类型告诉我它没有定义。但是，如果该文件 js 不是模块类型并且如果它识别并执行它则没有任何导入。

我的代码如下...

索引.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Map Generator</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script type="module" src='./js/index.js'></script>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; height:100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        customMap.addMap("icgc", "map");
    </script>
</body>
</html>

index.js 文件

import MapFunctions from './class/MapFunctions.js'

// new MapFunctions().createMap("openstreetmaps", "map");

var customMap = {
    addMap: function name(base, target) {
        new MapFunctions().createMap(base, target);
    }
}

使用构造函数它可以工作，但目的是从 index.html 中您只需调用函数 customMap.addMap () 并且只导入文件 index.js

在这里你有存储库，以防你在那里更清楚地看到它

谢谢

标签： javascript

解决方案

推荐阅读