首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使外部的js文件写入到html的<script>标签中?通过普通JS或jQuery

在HTML中,可以通过普通JS或jQuery将外部的JS文件写入到<script>标签中。

使用普通JS的方法如下:

  1. 创建一个<script>标签元素,并设置其type属性为"text/javascript"。
  2. 创建一个XMLHttpRequest对象,用于异步加载外部的JS文件。
  3. 使用XMLHttpRequest对象的open()方法指定要加载的JS文件的URL,并使用send()方法发送请求。
  4. 在XMLHttpRequest对象的onreadystatechange事件中,当readyState为4(表示请求已完成)并且status为200(表示请求成功)时,将返回的JS代码写入到<script>标签中的innerHTML属性中。
  5. 将<script>标签插入到HTML文档中的<head>或<body>中,使其生效。

以下是使用普通JS的示例代码:

代码语言:javascript
复制
// 创建<script>标签
var script = document.createElement('script');
script.type = 'text/javascript';

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 异步加载外部的JS文件
xhr.open('GET', 'external.js', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 将返回的JS代码写入<script>标签中
    script.innerHTML = xhr.responseText;

    // 将<script>标签插入到HTML文档中
    document.head.appendChild(script);
  }
};
xhr.send();

使用jQuery的方法更加简洁,可以使用jQuery的getScript()函数来加载外部的JS文件,并将其写入到<script>标签中。

以下是使用jQuery的示例代码:

代码语言:javascript
复制
// 使用jQuery加载外部的JS文件
$.getScript('external.js', function() {
  // 外部的JS文件加载完成后的回调函数
});

通过以上方法,可以将外部的JS文件写入到HTML的<script>标签中,使其在页面加载时执行。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular Elements 组件在非angular 页面中使用DEMO

它借助Chrome浏览器ShadowDom  API,实现一种自定义组件。 这种组件可以用Angular普通组件开发技术进行编写,学习成本低,当它构建好后生成一个打包js文件。...如果页面引入该Js文件 ,就相当于在页面中新增了一个标签,所以在任意框架中都可以使用新标签,就像它是原生div一样。        ...其中加载动态外部模块就是先编译一个angular elements项目,然后动态把该bundle.js插入页面。...于是我就尝试一下,看这个构建angular elements 文件到底如果引入一个空白页面,引入后组件在浏览器又是如何呈现。      页面结构:      ?.../native-shim.js"> <script src=".

2.7K20

JQuery基础概念知识

其模块化使用方式使开发者可以很轻松开发出功能强大静态动态网页。 jQuery,顾名思议,也就是JavaScript和查询(Query),即是辅助JavaScript开发库。...来调用命令了,只需要定义id即可,通过id选择器来选中JQuery对象,之后便可以通过对象方法来操作 总结 JQUERY是一个JAVASCRIPT库(子集)、JS文件也是一个工具包; 封装了大量有用函数...文件,即导入jquery-1.11.1.min.js(此处是压缩版文件): 1 <script src="js/jquery-1.11.1.min.js" type="text/javascript...带有min文件打开后是没有缩进,不带min那个是完整格式,打开后是有良好格式js代码,方便阅读和修改(一般不要改) 应用 首先在html文档写一个输入框和两个按钮:1234 //public void doCheck(); //在这个方法写入表单验证代码

1.2K10

Web 前端开发代码规范

-- /XXX模块 --> 2.2.4标签与属性 1、由于html标签和属性不区别大小写,所有建议都采用小写,尤其是自定义标签和属性名,否定js取不到,如: <div data-bgColor="red...2.3 CSS代码规范 2.3.1 CSS引用规范 1、所有CSS均为<em>外部</em>调用,不得在页面书写任何内部样式<em>或</em>行内样式; 2、<em>html</em>页面引入样式<em>文件</em>: 统一使用link<em>标签</em>,少用@import(原生import... 2、引入位置: body<em>标签</em>内最后部(非body外面), 减少因载入脚本而造成其他页面内容阻塞<em>的</em>问题(<em>js</em>单线程)。... 3、引入方式:<em>html</em>页面<em>中</em>禁止直接编写<em>js</em>代码,统一使用 <em>外部</em>引用方式...——缓存<em>JQuery</em>对象 要养成将<em>jquery</em>对象缓存进变量<em>的</em>习惯,避免进行多次查找,另外为了区分<em>普通</em><em>的</em><em>JS</em>对象和<em>jQuery</em>对象,建议在变量首字母前加上$符号。

3.2K10

一个小时学会jQuery

除此以外,jQuery提供API让开发者编写插件。其模块化使用方式使开发者可以很轻松开发出功能强大静态动态网页。...在其核心,jQuery重点放在从HTML页面里获取元素并对其进行操作。如果你熟悉CSS,就会很清楚选择器威力,通过元素特性元素在文档位置去描述元素组。...选择器和包装集 为了使设计和内容分离而把CSS引入Web技术时候,需要以某种方式从外部样式表引用页面元素组。...同时通过jQuery获得id对应元素后可以调用jQuery相应方法对该元素进行操作,具体代码如下所示: <script type="text/javascript" src="js/jquery-...5.3、发送数据服务器 默认情况下,Ajax请求使用GET方法。如果要使用POST方法,可以设定type参数值。这个选项也会影响data选项内容如何发送到服务器。

18.5K71

Js文件异步加载

Js文件异步加载 浏览器渲染引擎与Js脚本引擎是互斥,在浏览器开始渲染页面时,如果遇到标签,会停止渲染当前页面,也就是说在脚本加载与执行过程中会阻塞页面的渲染,在网速较差环境下可能会出现浏览器页面假死情况...,这也就是尽量将文件放置于后原因,Js文件异步加载就是使浏览器加载外部Js脚本文件时不阻塞渲染线程,这称为非阻塞模式加载,当然加载完成之后解析执行Js脚本时必须与渲染引擎互斥...://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" > async HTML5为元素定义了async属性,目前主流浏览器都已经支持...://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" > Script DOM Element Script DOM Element...方式即动态插入一个标签来加载外部Js脚本文件,将其作为onload事件回调函数,即在页面加载完成后再执行,这样就不会阻塞渲染线程。

10.3K20

jQuery

阻止事件冒泡 页面载入 与window.onload区别 事件委托 动画效果 jQuery jQuery封装了JS代码,使JS编写更加简单,类似python模块,在前端叫“类库”,同时也兼容多个浏览器...4.通过点击打开,复制里面的内容保存到JS文件 5.通过script标签src引入文件 ''' # CDN版(CDN:Content Delivery Network,内容分发网络) ''' 如果能保持电脑一直有网络.../ajax/libs/jquery/3.4.1/jquery.min.js 4.3给大家放好URL了,复制 5.通过script标签引入 ''' # 最终引入 <script src="jQuery...文档处理 事件 动画效果 插件 each、data、Ajax jQuery语法 $符号事jQuery重要标识 //在JS可以通过获取先获取标签,然后去使用对应方法,在jQuery中一样,...可以先筛选元素(标签),然后再对该元素做出动态操作 格式:$(selector).action() selector:通过选择器获取元素 action:获取元素后动作行为 jQuery对象 JSDOM

6.8K10

RequireJS

随着网站功能逐渐丰富,网页js也变得越来越复杂和臃肿,原有通过script标签来导入一个个js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂需求...我们要从之后篇幅中一一解释 先来看一段常见场景,通过示例讲解如何运用requirejs 正常编写方式 index.html body并未被显示,当点击确定后,才出现,这就是JS阻塞浏览器渲染导致结果。...js,但是大部分情况下网页需要加载JS可能来自本地服务器、其他网站CDN,这样就不能通过这种方式来加载了,我们以加载一个jquery库为例: require.config({ paths :...配置加入data-main后,就可以使每一个页面都使用这个配置,然后页面中就可以直接使用require来加载所有的短模块名 data-main还有一个重要功能,当script标签指定data-main

15710

day40_jQuery学习笔记_01

1.2、当前流行 JavaScript 库有: jQuery,最流行 EXT_JS,版本2.0以后开始收费(不包括版本2.0)。 Dojo,有很多js单独文件,需要导入很多js文件,速度慢。...-- 如果标签script引入了js(src),那么标签体就不能写内容了 -->     <script type="text/javascript" src=".....,所以想要获得value值,需要把js代码放在input标签下面         // jQuery 获得jQuery对象语法:         //   $("选择器") == jQuery(...> 三、jQuery 【选择器】 3.1、基本选择器【掌握】 详解如下: #id         id选择器, 通过标签id值获得元素...  插入一个 tj         $tj.prependTo($love);  // 将 tj 插入 love 内部前面      示例动图如下: 5.2、外部插入

6.6K20

谈谈 uni-app 与 html、vue、JS、小程序区别?

外部文件引用方式变化 以前通过script src、link href引入外部js和css; 现在是es6写法,import引入外部js模块(注意不是文件)css 以前 <script src=...其实标签是老概念,标签属于浏览器内置东西。但组件,是可以自由扩展。 类似你可以把一段js封装成函数模块,你也可以把一个ui控件封装成一个组件。...如果你想改变某个dom元素显示内容,比如一个view显示文字: 以前是给view设id,然后js通过选择器获取dom元素,进一步通过js进行赋值操作,修改dom元素属性值。...直接通过赋值方式修改数据,如果数据绑定界面上,界面会自动更新渲染 从上述示例,还可看出事件写法变化。...在普通vue页面里生命周期叫页面生命周期。在项目根目录app.vue文件生命周期叫应用生命周期。

52710

求职 | 史上最全web前端面试题汇总及答案2

然而,在以下情况,请使用 POST 请求: ①无法使用缓存文件(更新服务器上文件数据库)向服务器发送大量数据(POST 没有数据量限制)。...当然也可以直接使用成熟框架、比如html5shim。 Javascript 1、JS如何使页面跳转?怎么引入一个外部JS文件?...①直接在head标签写入js代码,如下 ②引入写好js文件,使用语句 也是直接放入head标签里头,也有的是放在前面。 2、输入框验证用什么事件?...这些特性使JSON成为理想数据交换语言。 所以它往往在AJAX替代XML,交换数据。 6、你项目中有使用到跨域吗?你在项目中是如何处理JS跨域问题? ①有。...②实际上Ajax与JSONP有着本质上不同。Ajax核心是通过XMLHttpRequest获取数据,而JSONP核心则是动态添加标签来调用服务器提供js文件

6.1K20

Web前端开发代码规范(基础)

-- /XXX模块 --> 2.2.4标签与属性 1、由于html标签和属性不区别大小写,所有建议都采用小写,尤其是自定义标签和属性名,否定js取不到,如: <div data-bgColor="red...2.3 CSS代码规范 2.3.1 CSS引用规范 1、所有CSS均为<em>外部</em>调用,不得在页面书写任何内部样式<em>或</em>行内样式; 2、<em>html</em>页面引入样式<em>文件</em>: 统一使用link<em>标签</em>,少用@import(原生import... 2、引入位置: body<em>标签</em>内最后部(非body外面), 减少因载入脚本而造成其他页面内容阻塞<em>的</em>问题(<em>js</em>单线程)。...      3、引入方式:<em>html</em>页面<em>中</em>禁止直接编写<em>js</em>代码,统一使用<em>外部</em>引用方式...——缓存<em>JQuery</em>对象 要养成将<em>jquery</em>对象缓存进变量<em>的</em>习惯,避免进行多次查找,另外为了区分<em>普通</em><em>的</em><em>JS</em>对象和<em>jQuery</em>对象,建议在变量首字母前加上$符号。

1.7K21
领券