在html文件中引入另一html文件，实现代码复用

最新推荐文章于 2024-09-09 22:16:15 发布

_刘磊_

最新推荐文章于 2024-09-09 22:16:15 发布

阅读量8.6k

点赞数 1

本文链接：https://blog.csdn.net/ll1109489444/article/details/55262684

版权

本文介绍了一种通过JavaScript实现前端HTML代码复用的方法，利用该方法可以有效减少代码冗余，便于维护。具体步骤包括创建包含重复代码的独立HTML文件，并将其转换为JS代码，再通过在各页面中引入相应的JS文件来实现。

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

最近写前端html网页，下载了一个模板进行修改，发现每个页面都有很多重复代码（如导航栏）。于是想将重复代码抽取出来，方便修改，也能减轻代码量。百度过几个方法，如<!--#和object等，都不好用。最后使用了javascript这个方法。

一、新建一个Text.html文件，将重复代码复制进去（方便以后修改）

二、打开站长之家，找到旧版本的html/js互转功能，将重复代码转化为js代码（百度有详细教程）（当然也可以自己写）

如下图：

三、新建一个js文件，如navigation.js 。将js代码复制进去

四、在原html文件区域，引入js文件，就可以了。

代码：<script type="text/javascript" src="./jquery/navigation.js"></script>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_刘磊_

关注关注

1
点赞
踩
6

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

html5 网页复用问题,html代码复用各种方法

weixin_32149443的博客

06-16

1039

1.gulp-file-include(工具)使用步骤：1.安装gulp以及gulp-file-include(NodeJs上)2.新建gulpfile.js,配置 gulp-file-include:var gulp =require('gulp');//引入gulpvar fileinclude =require('gulp-file-include');//引入gulp-file-incl...

web前端模块化框架，一句代码让html可直接引入别的html文件

许天成的博客

03-30

2226

一个web前端模块化框架，可以引入模板html文件，利于前后端分离的网站重复代码以及模块的复用。

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

HTML不同页面中重用代码

weixin_34233856的博客

02-24

938

需求几个页面需要的头部和底部的内容往往是一样的，这就希望可以只写一段代码作为模板，然后再几个页面中都加载这这个模板。另外，如果需要修改，也只要修改模板就好，所有页面都同时都是新的样式了。通过 JavaScript 来实现能实现上面需求的方法还是不少的，这个比较简单一点，几乎不需要学习的额外知识，只通过2句基本的js语句就能实现。一句写页面html，一句加载js文件执行。暂时先用了这个方法。 ...

HTML 揭秘：HTML 编码快速入门

最新发布

m0_53117341的博客

09-09

2162

HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.

HTML的复用技巧

09-28

在面向对象软件开发的时候，我们经常提到“复用”，很好地复用代码不仅可以大大提高开发效率，同时使得代码更易于维护。

HTML代码复用

alpha105的博客

06-04

1530

HTML代码复用

复制html代码复用,html代码用js实现复用

weixin_42305648的博客

06-26

639

html代码用js实现复用发布时间：2020-06-08 02:33:25来源：51CTO阅读：2286作者：DanielYue作为前端开发人员，大家都会碰到的一个问题就是重复的代码怎么处理，如果总是复制粘贴，会使得代码显得非常的庞大，不易读。虽然有一些语言如node.js可以模块化管理，但是用js或者jquery实现既简单又可以面对其他环境搭建的时间。假如有一段html代码，我需要在多个页面使用...

html页面如何复用,html代码用js实现复用

weixin_35954566的博客

06-04

1389

作为前端开发人员，大家都会碰到的一个问题就是重复的代码怎么处理，如果总是复制粘贴，会使得代码显得非常的庞大，不易读。虽然有一些语言如node.js可以模块化管理，但是用js或者jquery实现既简单又可以面对其他环境搭建的时间。假如有一段html代码，我需要在多个页面使用，那就来实现以下：html>Document.asd{border:1pxsolid#ccc;}.sss{color:...

HTML怎样实现代码复用，HTML复用之gulp-file-include

http://xueshuai.top

01-05

560

首先需要全局安装 Gulp npm install gulp -g 在一个项目中安装 gulp-file-include npm install gulp-file-include -s 新建 dist 、src / include 目录、gulpfile.js 文件 dist 是打包之后的页面文件 src/include 是写分离出来的 html 文件(公共html部分，只需要写 html body 部分) gulpfile.js 是 gulp-file-include 的配置文.

jsp中一个页面引入另一个页面的实现代码

10-26

在JSP（Java Server Pages）中，页面间相互引入是一种常见的需求，它可以实现页面的模块化设计，提高代码的复用性。一个页面引入另一个页面的方法主要有两种：使用指令和使用动作标签。指令通常使用的是include...

基于HTML+CSS+JavaScript实现的QQ音乐界面+源代码+文档

04-09

在这个QQ音乐界面的实现中，HTML文件将定义页面的基本元素，如标题、播放器、歌曲列表、按钮等。通过使用适当的标签，如`<header>`、`<nav>`、`<section>`、`<article>`和`<footer>`，我们可以创建出清晰的页面布局...

在html中引入外部样式表

04-06

在HTML5中，引入外部样式表是通过`<link>`元素来实现的，这使得网页设计者能够将样式代码（CSS）与结构化内容（HTML）分离，提高代码的可维护性和重用性。下面我们将详细探讨这个过程，并通过一个案例进行实际操作。...

html5 代码复用,代码复用模式（推荐篇） – 深入理解JavaScript系列 46

weixin_34296646的博客

06-09

521

本文是《JavaScript深度解析》系列文章第 46篇 (共 51 篇)介绍本文介绍的四种代码复用模式都是最佳实践，推荐大家在编程的过程中使用。模式1：原型继承原型继承是让父对象作为子对象的原型，从而达到继承的目的：function object(o) {function F() {}F.prototype = o;return new F();}//要继承的父对象var parent = {n...

HTML 代码复用实践

weixin_34109408的博客

08-02

723

前言通常我们所做的一些页面，我们可以从设计图里面看出有一些地方是相同的。例如：头部，底部，侧边栏等等。如果是制作静态页面的同学，对于这些重复的部分只能够通过复制粘贴到新的页面来，如果页面的数量上去了而中途公共的部分出现要修的地方。不过有上10个页面都用到了这个公共的html代码。那修改起来不是很麻烦吗？拿sf来说，他们的头部和底部...

html代码复用（axios的方法）

qq_70353846的博客

11-21

410

html代码复用（axios的方法）

HTML的复用

javazhuanzai的专栏

01-15

480

====================================================== 注：本文源代码点此下载 ====================================================== 在面向对象软件开发的时候,我们经常提到“复用”,很好地复用代码不仅可以大大提高开发效率,同时使得代码更易于维护。 html的复用是一个很少被提及

html 重复显示,使用相同的JavaScript重复HTML

weixin_29530803的博客

06-22

1090

我应该在同一页上重复多次相同的HTML代码段。我有一个外部JavaScript文件，只要用户与其中一个重复段进行交互，就会调用其功能。但是，只有三个代码段中的第一个会影响交互。当与另外两个人互动时，没有任何反应，也就是说，JavaScript不会被调用。使用相同的JavaScript重复HTML我会假设，如果所有的HTML代码段都有相同的ID和类(除了应该分配唯一ID)，那么至少所有3个HTML段...

html文件引入其它html文件方法详解

chenmou4210的博客

06-14

7625

引入后主页面的CSS样式不适用于被引入页面比如，在主页面设置 <style> * { margin: 0; padding: 0; } </style> 只在本页面生效，引入文件整体适用，但引入文件内容不适用。 1. iframe引入 a...

html5 网页复用问题,代码复用模式（避免篇） – 深入理解JavaScript系列 45

weixin_36472718的博客

06-16

296

本文是《JavaScript深度解析》系列文章第 45篇 (共 51 篇)介绍任何编程都提出代码复用，否则话每次开发一个新程序或者写一个新功能都要全新编写的话，那就歇菜了，但是代码复用也是有好要坏，接下来的两篇文章我们将针对代码复用来进行讨论，第一篇文避免篇，指的是要尽量避免使用这些模式，因为或多或少有带来一些问题；第二排是推荐篇，指的是推荐大家使用的模式，一般不会有什么问题。模式1：默认模式代码...

在HTML文件中引入JavaScript代码的方式有哪几种？各有什么特点？

05-30

在HTML文件中引入JavaScript代码的方式主要有以下几种： 1. 内部嵌入方式：将JavaScript代码嵌入到HTML文件中的<script>标签内，代码直接写在HTML文件中。这种方式的优点是简单易用，缺点是代码和HTML混合在一起，不便于维护和修改。 2. 外部引用方式：将JavaScript代码写在单独的.js文件中，然后在HTML文件中使用<script>标签引用该文件。这种方式的优点是代码和HTML分离，便于维护和修改，缺点是需要多个文件，增加了文件的请求次数，影响网页加载速度。 3. 行内事件方式：在HTML标签内使用JavaScript代码，例如<button onclick="alert('Hello World!')">Click Me</button>。这种方式的优点是简单方便，缺点是不利于代码的复用和维护。总的来说，外部引用方式是最常用的方式，它可以将JavaScript代码单独存放在一个.js文件中，便于维护和复用，同时也可以使用缓存机制提高网页加载速度。