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

如何创建外联

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

但是，如果是下面这样：

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

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱，才寂寞 2022-09-18 21:52:25

大致可以这样写

<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 的 js 代码，一定要写在 <script type="text/javascript" id="qqMap"></script> 的后面。

这是我这边的效果：

回复收藏 0

冷血 2022-09-18 21:52:25

这种按需加载方案是可行的，也是常用做法，你的问题是得确保代码是在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');

回复收藏 0

~没有更多了~

关于作者

十级心震

暂无简介

0 文章

0 评论

23 人气

关注发私信

已经忘了多久

文章 0 评论 0

关注

15867725375

文章 0 评论 0

关注

LonelySnow

文章 0 评论 0

关注

走过海棠暮

文章 0 评论 0

关注

轻许诺言

文章 0 评论 0

关注

信馬由缰

文章 0 评论 0

友情链接

文江博客

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。