如何在HTML script标签中调用外部JS变量？Kakao地图API加载失败

问题概述 #

由于API密钥属于私有数据，需要放在外部文件中管理。按照官方基础用法直接在script标签写入密钥的方式不符合安全要求，尝试动态加载API脚本的写法出现了map变量未声明的错误——大概率是API脚本未加载完成就执行了地图初始化代码，也可能伴随密钥认证失败的问题。

错误根源 #

你之前的写法中，设置script标签的src后，API脚本是异步加载的，而后续依赖kakao.maps的代码没有等待脚本加载完成就执行，导致找不到相关变量；另外需要确认外部文件中的密钥是否正确暴露为全局变量。

可行解决方案 #

方案1：全局变量+加载事件监听 #

首先确保外部密钥文件mapkey.js正确暴露全局变量：

// ../src/const/mapkey.js
window.mapkey = '你的Kakao地图API密钥';

然后修改页面中的脚本逻辑，监听API脚本的加载完成事件，再执行地图初始化：

<script src="../src/const/mapkey.js"></script>
<script type="text/javascript">
  // 创建API脚本元素
  const apiScript = document.createElement('script');
  apiScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${window.mapkey}`;

  // 脚本加载完成后初始化地图
  apiScript.onload = function() {
    // 示例：初始化地图
    const mapContainer = document.getElementById('map');
    const mapOption = {
      center: new kakao.maps.LatLng(37.5665, 126.9780), // 首尔坐标示例
      level: 3
    };
    const map = new kakao.maps.Map(mapContainer, mapOption);
  };

  // 监听加载错误，排查密钥或网络问题
  apiScript.onerror = function() {
    console.error('Kakao地图API加载失败，请检查密钥有效性或域名白名单配置');
  };

  // 将脚本添加到页面头部
  document.head.appendChild(apiScript);
</script>

方案2：ES模块化引入（适用于现代前端项目） #

如果你的项目支持ES模块，可以将密钥文件改为模块形式：

// ../src/const/mapkey.js
export const KAKAO_MAP_KEY = '你的Kakao地图API密钥';

然后通过模块脚本导入密钥并动态加载API：

<script type="module">
  import { KAKAO_MAP_KEY } from '../src/const/mapkey.js';

  const apiScript = document.createElement('script');
  apiScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_MAP_KEY}`;

  apiScript.onload = () => {
    const mapContainer = document.getElementById('map');
    const map = new kakao.maps.Map(mapContainer, {
      center: new kakao.maps.LatLng(37.5665, 126.9780),
      level: 3
    });
  };

  apiScript.onerror = () => {
    console.error('API加载失败，请检查密钥和域名配置');
  };

  document.head.appendChild(apiScript);
</script>

关键注意事项 #

• 确认Kakao开发者平台中已配置当前项目的域名白名单，否则会因认证失败导致API无法加载
• 必须等待API脚本加载完成后再使用kakao.maps相关对象，否则必然出现变量未定义错误
• 检查密钥文件路径是否正确，确保脚本能成功加载密钥变量

内容的提问来源于stack exchange，提问作者nayounsang