前端封装头部和尾部的方法

最新推荐文章于 2024-01-28 06:52:58 发布
最新推荐文章于 2024-01-28 06:52:58 发布
阅读量1.8k 收藏 6
点赞数 1
文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42390786/article/details/105511244
版权

一、通过iframe：
1.原理：创建一个header.html头部和一个footer.html底部公共文件，然后再主页用两个iframe引入这两个文件
2.代码：
主页

<!DOCTYPE html >
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<link href='head.css' rel="stylesheet" type="text/css" />
		<script type="text/javascript">
		</script>
	</head>

	<body>
		<!--公共头部-->
		<!--iframe需要用div包括起来，然后给div定个高度-->
		<div class="">
			<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="head.html" width="100%" height="auto"></iframe>
		</div>
		<!--公共尾部-->
		<div class="footer">
			<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="footer.html" height="auto" width="100%"></iframe>
		</div>
	</body>

</html>

头部

<!DOCTYPE html >
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<link href='head.css' rel="stylesheet" type="text/css" />
		<script type="text/javascript"
最低0.47元/天 解锁文章
goodluck0
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html封装页面头尾_JavaScript 的工作原理：Shadow DOM 的内部结构以及如何构建可封装的组件...
weixin_28900989的博客
11-29 415
作者：Alexander Zlatkovn译者：May这是专门探索 JavaScript 及其构建组件的系列文章的第 17 篇。在识别和描述核心元素的过程中，我们还分享了构建 SessionStack 时使用的一些经验法则，这是一个 JavaScript 应用程序，需要强大且较高性能，以帮助用户实时查看和重现他们的 Web 应用程序的缺陷。概述Web Components 是一套不...
如何封装头部导航组件弹出层
weixin_58102387的博客
01-04 490
第一步 在html中设置一个存放模态框的盒子mask html样式 <div class="mask" v-show="shownav"> <div class="top" @click="shownav = false">X</div> <jiugongge :bg="'transparent'" :color="'#fff'"></jiugongge> <myHeader @showModel="
HTML - 头部元素
最新发布
weixin_72262657的博客
01-28 974
如果你的 HTML 文档的语言设置好了，那么你的 HTML 文档就会被搜索引擎更有效地索引（例如，允许它在特定于语言的结果中正确显示），对于那些使用屏幕阅读器的视障人士也很有用（例如，法语和英语中都有“six”这个单词，但是发音却完全不同）。已经到了我们快速学习 HTML 头部的尾声——你还能学到更多的相关的，但是现阶段详尽的讲的太多会令人无聊且困惑，我们只希望你现在在这学到最基本的概念！我们在这里的目的不是向你展示如何使用所有可能放在头部的东西，而是教你如何熟悉使用你想要包括在头部的主要元素。
head通用模板封装
叶遮沉阳的博客
06-10 787
head通用模板封装 一、场景描述 在head中经常会有一些公共的js和css，不想在每个html中重复的引入。 二、确定thymeleaf的版本 <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <!-- set thymele...
标准的HTML头部写法
徐杰的专栏
03-20 6543
我觉得还是写的比较标准的HTML。学习下。  155手机游戏下载_手游天下[155.cn]中国免费手机游戏第一门户! <!-- // -->
前端微信小程序封装接口方法
05-05
别忘在app.js和siteinfo.js中引入,项目页面中用getApp()方法直接调用相应的接口方法即可
详解Vue前端对axios的封装和使用
12-09
这个是功能性文件包括拼接url、过滤参数等,把方法集合到一个文件方便维护和修改。 读一遍知道他有什么功能就行了 const helper = { // 根据name获取地址栏的参数值 getQueryString (name) { let reg = new ...
前端封装sqlte数据库连接池及常用方法
05-12
前端封装sqlte数据库连接池及常用方法
常用的前端JavaScript方法封装
07-26
引入项目直接使用
Android中封装RecyclerView实现添加头部和底部示例代码
08-29
主要给大家介绍了关于Android中封装RecyclerView实现添加头部和底部的相关资料，网上这方面的资料很多，但都不是自己需要的，索性自己写一个分享出来供大家参考学习，需要的朋友们下面随着小编一起来学习学习吧。
html 中头部怎么包含在每个页面,关于HTML头部的详细介绍
weixin_32666933的博客
06-10 200
HTML 元素可以添加在头部区域的元素标签为: , , , , , , and .HTML 元素 标签定义了不同文档的标题。 在 HTML/XHTML 文档中是必须的。 元素:定义了浏览器工具栏的标题当网页添加到收藏夹时，显示在收藏夹中的标题显示在搜索引擎结果页面的标题一个简单的 HTML 文档:Title of the documentThe content of the document....
纯静态网站模板封装header和footer
u011280778的博客
08-18 4617
前后端分离的网站模板，如果不用任何渲染引擎，能否封装公共的header和footer（或其它html公共代码呢）？ 答案是肯定的，因为jQuery有一个函数叫 load ，可以在浏览器绘制页面之前加载完整的 html 页面。所以，当前页面必须要先加载jQuery框架，即你的script标签加载顺序需要注意。 示例代码如下： index.html <!DOCTYPE html>...
html 引入一个公共的头部和底部
freedom_____的博客
11-03 1740
默认扩展名是 .stm、.shtm 和 .shtml。SSI就是在HTML文件中，可以通过注释行调用的命令或指针，SSI具有 强大的功能，只要使用一条简单的SSI命令就可以实现整个网站的内容更新，时间和日期的动态显示，以及执行shell和CGI脚本程序等复杂的功能。建立一个head.js的文件，找一个html转js的网站，然后把你头部的html代码转化成js代码，并放在head.js文件里面。需要注意的是，此时的header.html或footer.html不需要是完整的HTML，这里添加标签内内容即可。
前端学习12：HTML头部、布局
RainstormGod的博客
04-19 2182
meta name="concrotion" content="这是一个网页">
如何在html文件中导入header、footer等
11-20 778
1.include是php函数，所以确实需要转化成.php文件--(其实除了用php,html都有自带的引入方法）2.html转化为php文件很简单，直接改一下后缀名就可以了--（如：index.html直接改成index.php）3.就是把完整的页面拆分成head.php与index.php页面--（如：导航栏以上代码保存为head.php,剩下保存为index.php）4.在inde...
js脚本注入html,javascript – 将js注入头部(脚本中包含完整代码)
weixin_36302134的博客
06-22 958
我想在网站的头部添加一个脚本,以便目标html的头部看起来像这样< head>< script type =“text /javascript”> *一些代码…… *< / script&gt ;< /头取代. 使用此脚本可以完美地完成：var head = document.getElementsByTagName('head')[0],script ...
HTML设计网页之网页头部
热门推荐
m0_53521757的博客
06-08 1万+
HTML设计网页之网页头部 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>小逯工作室有限科技公司</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <link rel="stylesheet" type="text/css" href=
h5头部组件封装
LILEILEILOVE的博客
03-12 479
H5头部组件封装 <div> <div :style="`padding-top:${paddingTop}px`"> <van-nav-bar /> </div> </div> setup(){ const paddingTop = computed(()=>{ return store.state.height } 创建utils文件夹，env.js export const getSafeAreaHeight=()=>{ l
前端axios方法封装
05-10
axios是一个基于Promise的HTTP客户端，可以用在浏览器和Node.js环境中。在前端开发中，我们常常需要进行网络请求，为了提高代码的复用性和可维护性，我们可以将axios方法封装起来。 以下是一个简单的axios方法封装示例： ```javascript import axios from 'axios' const instance = axios.create({ baseURL: 'http://api.example.com', // API请求的默认前缀 timeout: 10000 // 请求超时时间 }) // 请求拦截器 instance.interceptors.request.use(config => { // 在发送请求之前做些什么 return config }, error => { // 对请求错误做些什么 return Promise.reject(error) }) // 响应拦截器 instance.interceptors.response.use(response => { // 对响应数据做些什么 return response }, error => { // 对响应错误做些什么 return Promise.reject(error) }) export default { // 封装get方法 get(url, params) { return new Promise((resolve, reject) => { instance.get(url, { params: params }).then(response => { resolve(response.data) }).catch(error => { reject(error) }) }) }, // 封装post方法 post(url, data) { return new Promise((resolve, reject) => { instance.post(url, data).then(response => { resolve(response.data) }).catch(error => { reject(error) }) }) } } ``` 在上面的代码中，我们使用axios.create()方法创建了一个axios实例，设置了请求的默认前缀和超时时间，然后定义了请求拦截器和响应拦截器，用来在请求发送前和响应返回后进行一些公共的处理。最后，我们封装了get和post方法，用来发送get和post请求，并返回一个Promise对象。 使用方法如下： ```javascript import http from './http' // 发送get请求 http.get('/user', { id: 1 }).then(data => { console.log(data) }).catch(error => { console.log(error) }) // 发送post请求 http.post('/login', { username: 'admin', password: '123456' }).then(data => { console.log(data) }).catch(error => { console.log(error) }) ``` 这样，我们就可以在项目中方便地调用封装好的axios方法，而且也方便维护和修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值