html页面用js引入js的方式_html文件如何引入其他js文件,使用import-优快云博客

本文介绍了多种动态加载外部JS和CSS文件的方法，包括使用script标签、jQuery的getScript方法及DOM API，展示了如何通过JavaScript动态地修改网页内容，适用于前端开发人员。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最原始的是用script便签：

<script type="text/javascript" src="http://xxx.xx/xxx.js"></script>

1. 使用js打印这个便签：

<script type="text/javascript">
 document.write('<script src="http://xxx.xx/xx.hs"><\/script>');
</script>

当然这也可以动态引入css以及其他html元素。

2. 使用dom的api添加script元素：

<script type="text/javascript">
var script = document.createElement("script");    
script.src = "http://xxx.xx/xx.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>

jQuery中封装了这种方式，并贴心的加入了回调：

$.getScript(url,callback(res, status));

简单实现如下：

var getScript = function(url, callback) {
  var js = document.createElement('script');
  js.setAttribute('type', 'text/javascript'); 
  js.setAttribute('src', url); 
  document.getElementsByTagName('head')[0].appendChild(js);
  
  if(callback && typeof callback == 'function'){
    if (document.all) { //IE
      js.onreadystatechange = function() {
        if(js.readyState == 'loaded' || js.readyState == 'complete'){
            callbackFn();
        }
      }
    }else{
      js.onload = function() {
        callbackFn();
      }
    }
  }
}