这个问题,之前没怎么想过,因为现在大部分时间我们都在搞 react、vue + webpack 这种有模块化的,所以基本上用 es module 就可以。

一般最终形态都是 html 引入 script 标签,如果一些老项目需要一个 script 标签里的 js 引用另一个 js 文件,怎么办呢。

function addScript(url){
  var script = document.createElement('script');
  script.setAttribute('type','text/javascript');
  script.setAttribute('src',url);
  // 具体加载在哪,可替换这一条
  document.getElementsByTagName('head')[0].appendChild(script);
}
// 加载在head末尾
document.getElementsByTagName('head')[0].appendChild(script);
document.head.appendChild(script);

// 加载在body末尾,需要确保已经有body标签了,如果这个代码是在head里,那可能还没有body
document.body.appendChild(script);

// 加在 head 标签上面,也就是 html 里的第一个元素
var html = document.documentElement;
html.insertBefore(script, html.firstChild);

// 加载在第一个script脚本前,确保网页中至少有一个 script 标签
var first = document.getElementsByTagName('script')[0];
first.parentNode.insertBefore(script, first);

// 把js文件插入到目前所在的js文件前
var first = document.getElementsByTagName('script'); 
var here = first[first.length-1]; 
here.parentNode.insertBefore(script, here);

// 把js文件插入到目前所在的js文件后
var first = document.getElementsByTagName('script'); 
var here = first[first.length-1]; 
here.parentNode.appendChild(script);

如果加载完,想要获取这个 js 文件中暴露的全局变量,则需要:

function addScript(url){
  var script = document.createElement('script');
  script.setAttribute('type','text/javascript');
  script.setAttribute('src',url);
  document.getElementsByTagName('head')[0].appendChild(script);
}
addScript('http://pv.sohu.com/cityjson')
window.onload = function () {
  console.log(window.returnCitySN)
}
Logo

前往低代码交流专区

更多推荐