在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文件的资料请关注我们其它相关文章!
相关推荐
-
引入JS文件IE6报语法错误或缺少对象问题的解决方法
解决"引入JS文件IE6报错"的问题 问题描述: 页面引入一个js文件,其中定义了函数或对象,然后在页面中调用函数或对象时,在IE6会报"语法错误"或"缺少对象".在IE6+或者IE7却运行正常. 问题分析: 这个对象在引入的JS文件中是存在的,因为在IE6+以上的浏览器都可以正常运行.这个问题在于文件编码上,如果JS文件编码与当前页面的编码不一致,就可能导致在IE6中页面不能正常获取和解析JS文件中的内容,在IE6中,默认引入的文件和页面的编码
-
怎么引入(调用)一个JS文件
我们旺旺需要调用别的 js文件.怎么处理? 看随机抽取这个例子.在一个页面中如下: <html> <head> <title>random number</title> <script type="text/javascript"> //随机抽取人名 </script> </head> <body> <form> <input type="button"
-
在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项目中引入外部文件的方法(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文件 有时候我们需要根据参数不同来引入不同的js文件,用html直接写标签满足不了我们的需求,总结几种方法,以及同步异步加载的各种需求 一.直接加载 <div id="divId"></div> <script> 二.异步加载,并发执行,但引入js内容不能直接使用 //1.1 直接document.write document.write("<script src='test.js'><\/script>
-
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
-
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/
-
Vue如何引入远程JS文件
问题 最近在使用 Vue 做东西,用到钉钉扫描登录的功能,这里需要引入远程的 js 文件,因为 Vue 的方式跟之前的不太一样,又不想把文件下载到本地应用,找了一下解决的方法,貌似都需要引入第三方的库,最后找到了解决方案,分享之. 思路 一开始的思路是在 Vue 加载完 Dom 之后(mounted),使用 JavaScript 脚本在 body 中插入远程的脚本文件. 后来发现了 Vue 的 createElement 方法,简单的封装一个组件解决问题. 解决方法 第一版代码(直接在操作 Do
-
浅谈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
-
VueJS如何引入css或者less文件的一些坑
我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢? 首先,引入公共样式时,我们在"main.js"里使用AMD的方式引入,即 require('./assets/css/main.less'); 这时,我们会抛出一个错误,是因为我们没有写解析的依赖,webpack不知道怎么解析 这时,我们要填写上依赖, require('!style!css!less!./assets/css/main.less'); 在很多以前的博客里都
-
为什么要在引入的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' /> 使用参数有两种可能, 第一.脚本并不存在,而是服务端动态生成的,因此带了个版本号,以示
随机推荐
- angular中实现控制器之间传递参数的方式
- event.srcElement 用法笔记e.target
- windows PostgreSQL 9.1 安装详细步骤
- SqlServer系统数据库的作用深入了解
- wowexec.exe比较简单的查杀办法(毒霸就是wowexec.exe专杀工具)
- VBS教程:语句-While...Wend 语句
- Java的web开发中SSH框架的协作处理应用笔记
- JavaScript验证知识整理
- js使用onmousemove和onmouseout获取鼠标坐标的方法
- 一键删除顽固的空文件夹 软件下载
- Jquery插件实现点击获取验证码后60秒内禁止重新获取
- PHP 编写的 25个游戏脚本
- python base64 decode incorrect padding错误解决方法
- JSP多种web应用服务器导致JSP源码泄漏漏洞
- C#异常处理总结及简单实例
- 解析php中获取url与物理路径的总结
- Python基于sftp及rsa密匙实现远程拷贝文件的方法
- 微信公众平台开发-微信服务器IP接口实例(含源码)
- jQuery Mobile页面跳转后未加载外部JS原因分析及解决
- Cors实现java后端完全跨域实例