不同的html中,加载公共的文件

最新推荐文章于 2024-02-26 21:41:27 发布

小样还想跑

最新推荐文章于 2024-02-26 21:41:27 发布

阅读量231

点赞数

文章标签： html javascript css

本文链接：https://blog.csdn.net/weixin_45356397/article/details/129723609

版权

通过创建一个名为loadSource.js的JavaScript文件，可以集中引入如BootstrapCSS和axios库等公共资源，避免在每个HTML文件中重复编写链接。只需在HTML文档中引入loadSource.js，即可实现资源的统一管理，简化代码并提高效率。

摘要由CSDN通过智能技术生成

tips:例如有两个html文件,main.html,index.html,每个html文件都需要引入很多公共的资源文件,难道我需要多个复制吗>,不需要只需要如下操作

创建一个js文件

loadSource.js //自定义命名

loadSource.js内容如下,举例如下

(function () {
  document.write('<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">');
  document.write('<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.3/axios.js"></script>');
})();

使用,在html文件中引入这个文件,这样的话,提升了美观,减少了代码

<script src="./js/loadSource.js"></script>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小样还想跑

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

nodejs://实现静态html文件的公共文件包含功能

xiao_xiaokui的博客

03-24

1037

缘起使用过php或其他后台语言的朋友们应该知道，对于公共文件，比如html的头部，底部等，可以单独写成一个.php文件。比如header.php和footer.php，然后用include(‘header.php’)或者require(‘header.php’)包含进来。当修改了header.php文件之后，所有引入了这个文件的代码，都会自动加载最新的文件。这样，一个普通网站如果有十...

html资源加载,如何加载文件资源 (HTML)

weixin_39880623的博客

05-31

721

如何加载文件资源 (HTML)01/28/2016本文内容[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]学习从各个位置加载文件资源。你可以访问以下应用文件中的文件资源：作为应用包的一部分传递的文件、包含为组件或框架包一部分的文件、来自应用数据的文件或来自 ...

参与评论您还未登录，请先登录后发表或查看评论

html 引文件,HTML公共文件引入

weixin_39830175的博客

07-16

407

在编写网页有多个页面时经常会用到很多公共的部分，如页面的头部导航、尾部信息等，如果每个页面都写一次太过繁琐造成代码的冗余且不便于维护，所以将公共数据封装化，继承引入才是王道。文件的引入在不同的环境下有不同的方式，如PHP环境下，可以通过设置，直接@include('public.header')就行，纯HTML可以iframe或者是其他方式，在一次页面中，我是通过ajax方式引入的，例如：1.在主...

html引用公共的html文件

weixin_33849215的博客

09-27

245

为什么80%的码农都做不了架构师？>>> ...

html中加载解析,HTML页面加载和解析流程详细介绍

weixin_39957312的博客

05-30

397

序言：我一直都认为“网页制作”这个词是一个不怎么高端的词，在我的印象中网页制作的词是没有生命力的一个制作，我喜欢用HTML 这样简单直接，这词凸显高端，有大气漂亮的UI、一套完美的VI、简单快速逻辑性强的前端程序代码浏览器加载和渲染html的顺序1. IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成(并不是说...

详解Django模版中加载静态文件配置方法

09-19

在Django框架中，管理静态文件是Web开发过程中...而在生产环境中，需要将静态文件收集到一个公共的目录，由Web服务器直接服务，以提高性能。通过上述配置，开发者可以有效地管理和加载项目中的静态资源，提升用户体验。

HTML加载gz文件,webpack打包的.gz文件，怎么在浏览器页面中引用

weixin_39945816的博客

06-09

1859

做的是 react 项目，在 webpack 中利用压缩插件 compression-webpack-plugin 将main.bundle.js 压缩成了 main.bundle.js.gz ,看起来是边小了，但是在从服务器上取下来的还是之前的 main.bundle.js ，问大牛们，怎么才能取到 main.bundle.js.gz 这个压缩后的文件？取到 .gz 文件了，浏览器能正常解析吗？...

vue 引入公共css文件的简单方法(推荐)

08-28

Vue 引入公共 CSS 文件的简单方法 ...我们可以使用三种方法来引入公共 CSS 文件，包括在入口 js 文件中引入、在 index.html 中引入和在组件中引入。每种方法都有其优缺，选择哪种方法取决于项目的具体需求。

JSP加载JS文件不起作用的有效解决方法

10-26

不过，在某些情况下，尝试在JSP页面中加载JS文件可能会遇到问题，尤其是当这些JS文件被放置在特定的目录下时。本文将详细探讨JSP页面中加载JS文件不起作用的原因，并提供有效的解决方法。首先，需要了解JSP页面...

HTML5公共页面提取作为公用代码的方法

01-19

在网站制作中有很多部分...-- 底部加载外部文件 --> [removed] $('.footer').load('conment/foot.html',function(responseTxt,statusTxt,xhr){ console.log('responseTxt,statusTxt,xhr') // console.log(re

怎么吧html的头部存到一个文件,多个页面引用公共的头部 header.html 和尾部 footer.html...

weixin_30273229的博客

07-20

2513

方法：通过load()函数，引入公共头部和尾部文件;js代码预览：$(".headerPage").load("header.html");$(".footerPage").load("footer.html");步骤：1. 把头部代码和尾部代码分别单独写到一个新的html页面(头部header.html 尾部footer.html)，以便引用；2. 在index.html页面把放头部的地方...

浏览器对html文件和css文件是如何加载的

最新发布

2301_79896470的博客

02-26

338

一个网页由三部分组成：html文件，css文件，js文件。这些文件负责不同的分工构建出多种多样的网页，HTML文件可以说是起到骨架作用，css文件为网页设置了多种样式，js文件为用户处理了多个页面交互和通信。

工作积累之HTML页面加载和解析流程

startwithdp的专栏

07-26

3204

浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。 2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。 3. 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。 4. 样式表在下载完成后，将和以前下载的所有样式表一起进行解

Html页面的加载和解析流程

咸鱼的星空

04-28

1018

前阵子，发现了这篇文章，发现自己开发网站这么长时间了，还不太清楚这个，今天和大家分享一下。 1.浏览器加载和渲染html的顺序 1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。 2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完） 3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么

引用html公共部分的方法

LUOZONGW的博客

10-21

5339

做前端项目时遇到导入公共部分的问题，因为合并的时候复制公共部分复制到吐。。

HTML页面引入公共HTML部分

小李不是歪理的博客

10-21

2362

经过多番百度和亲自使用，找出了以下四种现行可用的方法；各有优缺点，可选择适用方法使用；

html引入公共资源文件,HTML公共文件引入

weixin_36124750的博客

05-30

638

html如何导入css和js文件

weixin_50878401的博客

10-11

6258

html如何导入css和js文件 1.导入js文件 <script type="text/javascript" src="js文件路径"></script> 加入上述代码，即可导入js路径指向的js文件 2.导入css文件在html的体里加入下面这行代码即可导入css文件 <link rel="stylesheet" type="text/css" href="css文件路径"> 然后在需要使用css样式的组件加入class="样式体名称"属性即可对该组件使用cs

HTML引用资源相对路径

流星球

08-12

5173

HTML引用资源相对路径HTML相对路径(Relative Path)和绝对路径(Absolute Path)，同目录文件引用“.”——代表目前所在的目录。我们现在建一个源文件test.html，在info.html里要引用test.html文件作为超链接。<a href = "./index.html">index.html</a>其实，对同级目录文件的引用可以省略”./”直接引用。表示上级目

vue 打包输出公共js加载文件

05-18

Vue 打包输出公共 JS 加载文件可以通过配置 `webpack` 实现。首先，在 `webpack.base.conf.js` 中添加 `CommonsChunkPlugin` 插件，将公共的代码提取到一个 `vendor` chunk 中： ```javascript const webpack = ...