在js文件中引入（调用）另一个js文件的三种方法

比如我写了一个JS文件，这个文件需要调用另外一个JS文件，该如何实现呢？下面就总结下在js文件中引入另一个js文件的实现

方法一，在调用文件的顶部加入下例代码

function addScript(url){
	document.write("<script language=javascript src="+url+"></script>");
}

注：有时你引用的文件还可能需要引用其他的js,我们需要将需要的那个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);
}

利用document.createElement(”script”)生成了一个script的标签，设置其 type属性为text/javascript。

方法三，利用es6中export和import实现模块化

一个js文件代表一个js模块 。ES6引入外部模块分两种情况：

1.导入外部的变量或函数等；

import {firstName, lastName} from './test';

2.导入外部的模块，并立即执行

import './test'
//执行test.js，但不导入任何变量

以上就是在js文件中引入（调用）另一个js文件的三种方法的详细内容，更多关于js文件引入另一个js文件的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 同步异步动态引入js文件的几种方法总结

    动态加载js文件 有时候我们需要根据参数不同来引入不同的js文件,用html直接写标签满足不了我们的需求,总结几种方法,以及同步异步加载的各种需求 一.直接加载 <div id="divId"></div> <script> 二.异步加载,并发执行,但引入js内容不能直接使用 //1.1 直接document.write document.write("<script src='test.js'><\/script>

  • 为什么要在引入的css或者js文件后面加参数的详细讲解

    css和js带参数(形如.css?v=与.js?v=) 复制代码 代码如下: <script type="text/javascript" src="jb51.js?version=1.2.6″></script><link rel='stylesheet' href='base.css?version=2.3.3′ type='text/css' /> 使用参数有两种可能, 第一.脚本并不存在,而是服务端动态生成的,因此带了个版本号,以示

  • Vue如何引入远程JS文件

    问题 最近在使用 Vue 做东西,用到钉钉扫描登录的功能,这里需要引入远程的 js 文件,因为 Vue 的方式跟之前的不太一样,又不想把文件下载到本地应用,找了一下解决的方法,貌似都需要引入第三方的库,最后找到了解决方案,分享之. 思路 一开始的思路是在 Vue 加载完 Dom 之后(mounted),使用 JavaScript 脚本在 body 中插入远程的脚本文件. 后来发现了 Vue 的 createElement 方法,简单的封装一个组件解决问题. 解决方法 第一版代码(直接在操作 Do

  • 引入JS文件IE6报语法错误或缺少对象问题的解决方法

    解决"引入JS文件IE6报错"的问题 问题描述: 页面引入一个js文件,其中定义了函数或对象,然后在页面中调用函数或对象时,在IE6会报"语法错误"或"缺少对象".在IE6+或者IE7却运行正常. 问题分析: 这个对象在引入的JS文件中是存在的,因为在IE6+以上的浏览器都可以正常运行.这个问题在于文件编码上,如果JS文件编码与当前页面的编码不一致,就可能导致在IE6中页面不能正常获取和解析JS文件中的内容,在IE6中,默认引入的文件和页面的编码

  • 浅谈jsp文件和HTML互相引入的乱码问题

    1.在jsp中用include指令引入HTML文件时遇到的问题: jsp.html都可以正确的显示,当jsp引入html时访问jsp页面HTML出现乱码,jsp原有的输出无乱码,解决方法: 在HTML第一行加入:<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> jsp的编码格式为:<%@ page language="java&qu

  • Vue项目中引入外部文件的方法（css、js、less）

    Vue项目中引入外部文件的方法（css、js、less）

    这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font

  • 怎么引入(调用)一个JS文件

    我们旺旺需要调用别的 js文件.怎么处理? 看随机抽取这个例子.在一个页面中如下: <html> <head> <title>random number</title> <script type="text/javascript"> //随机抽取人名 </script> </head> <body> <form> <input type="button"

  • VueJS如何引入css或者less文件的一些坑

    VueJS如何引入css或者less文件的一些坑

    我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢? 首先,引入公共样式时,我们在"main.js"里使用AMD的方式引入,即 require('./assets/css/main.less'); 这时,我们会抛出一个错误,是因为我们没有写解析的依赖,webpack不知道怎么解析 这时,我们要填写上依赖, require('!style!css!less!./assets/css/main.less'); 在很多以前的博客里都

  • js 文件引入实现代码

    也不好麻烦让他们从新写一个方法,由于他们都引用了这个AA.js文件,想在这边在AA.js后执行一个函数自动把jq库引入,于是想到引入js文件方法: 复制代码 代码如下: getScript : function(s,call){ var el = UI.DC('script');         if (call) {             el.onload =el.onreadystatechange=call;         }         UI.A(el,'type','text

  • 在html中引入外部js文件,并调用带参函数的方法

    在html中引入外部js文件,并调用带参函数的方法

    在html中引入外部js文件,并调用js文件中的带参函数 1 项目结构 2 编写a.js.test.html //a.js function abc(str){ alert(str); } //test.html <html> <head> <script type="text/javascript" src="a.js"></script> <script type="text/javascript&

  • vue.js引入外部CSS样式和外部JS文件的方法

    学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢? 一.引入外部CSS样式文件 1. 在app.vue中<style>下直接引入对应的路径 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped. <style scoped> @import "../static/font/

随机推荐