如何创建外联<script>并执行？

最近在做QQ地图的功能。
因为不是所有页面都使用了地图，所以我就想在使用到地图的页面再加载js。
在index.html里面，这样是可以的。

但是，如果是下面这样：

<script type="text/javascript" id="qqMap"></script>

就会报错，“qq is not defined”。

我感觉是顺序的问题，所以就问了，这种追加上去的js方法真的没法用吗？
有没有更好的解决办法呢？

阅读 4.2k

<html> <head> <title></title> <script id="mAxios"></script> </head> <body> <script> (() => { var s = document.getElementById("mAxios"); console.log(s); s.setAttribute("src", "https://cdn.bootcss.com/axios/0.19.0/axios.min.js"); })(); window.onload = function () { console.log(axios); } </script> </body> </html>

这种按需加载方案是可行的，也是常用做法，你的问题是得确保代码是在script成功加载之后执行，参考下我简化后的按需加载模块

map.js

const KEY = '你的地图密钥';

const onLoad = [];

let TMapInit = false;

let TMapLoad = false;

function init(libraries) {
  if (!TMapInit) {
    const script = document.createElement('script');
    libraries = libraries || 'drawing,geometry,convertor';
    script.src = `//map.qq.com/api/js?v=2.exp&key=${KEY}&libraries=${libraries}&callback=onTMapLoad`;
    document.body.appendChild(script);
    TMapInit = true;
  }
}

/**
 * 接受地图异步回调的函数
 */
window.onTMapLoad = () => {
  TMapLoad = true;
  onLoad.forEach(callback => {
    callback && callback(window.qq.maps);
  });
};

export default {
  onReady(callback, libraries) {
    if (!TMapLoad) {
      if (!TMapInit) init(libraries);
      onLoad.push(callback);
    } else {
      callback && callback(window.qq.maps);
    }
  },
}

使用

import Map from '../map.js'

Map.onReady(maps => {
 //...your code
}, 'lite');

如何创建外联<script>并执行？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？

Microsoft