整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

别找了,Html网页自动跳转页面代码全在这里了

51rgb

网页自动跳转页面的代码在很多时候都非常的有用,下面的是两个简单的例子。仅供参考。

方案一,用<meta>里直接写刷新语句:

<html>

<head>

<meta http-equiv="Content-Language" content="zh-CN">

<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">

<meta http-equiv="refresh" content="5;url=http://www.51rgb.com">

<title>html网页自动跳转代码--西农大网站</title>

</head>

<body>

测试:html网页自动跳转代码<br/>

你可以在这里写下你想的一切东西!<br />

如:西北农林科技大学是一所985、211院校。<br />

</body></html>

方案二,用javascript脚本来跳转

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>正在进入西农大网站</title>

</head>

<body>

<form name=loading>

<p align=center> <font color="#0066ff" size="2">正在进入,请稍等</font><font color="#0066ff" size="2" face="Arial">...</font>

<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;">

<inputtype=text name=percent size=47 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;">

<script>

var bar=0

var line="||"

var amount="||"

count

function count{

bar=bar+2

amount =amount + line

document.loading.chart.value=amount

document.loading.percent.value=bar+"%"

if (bar<99)

{setTimeout("count",100);}

else

{window.location =http://www.51rgb.com;}

}</script>

</p>

</form><p align="center">

测试:html网页自动跳转代码<br/>

你可以在这里写下你想的一切东西!<br />

如:西北农林科技大学是一所985、211院校。<br /><br />

如果您的浏览器不支持跳转,<astyle="text-decoration: none" href="http://www.mycodes.net

"><font color="#FF0000">请点这里</font></a>.</p>

</body>

</html>

↓↓↓

最近公司vue项目中有一个需求,需要在当前页面刷新或跳转时提示保存并可取消刷新,以防止填写的表单内容丢失。刚开始思考觉得很简单,直接在Router的钩子中判断就好了,但是会发现还有新的问题存在,浏览器刷新和当前页面关闭的时候无法监听,最终用window.onbeforeunload成功解决,所以用这篇文章简单记录下整个解决过程。

vue-Router的钩子:

路由钩子可以分为全局的,单个路由独享的以及组件级别的,解决上述需求只用到了组件级别的路由钩子,所以本文只介绍组件级别的路由钩子,全局的和单个路由独享的路由钩子有需要的同学可以去vue-router官网查看介绍:

组件级别路由钩子分为三种:

  1. beforeRouteEnter:当成功获取并能进入路由(在渲染该组件的对应路由被 confirm 前)
  2. beforeRouteUpdate:在当前路由改变,但是该组件被复用时调用
  3. beforeRouteLeave:导航离开该组件的对应路由时调用

具体的介绍和写法如下:

const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
 // 在渲染该组件的对应路由被 confirm 前调用
 // 不!能!获取组件实例 `this`
 // 因为当守卫执行前,组件实例还没被创建
 // 可以通过传一个回调给 next来访问组件实例
 next(vm => { 
 // 通过 `vm` 访问组件实例
 })
 },
 beforeRouteUpdate (to, from, next) {
 // 在当前路由改变,但是该组件被复用时调用
 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
 // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
 // 可以访问组件实例 `this`
 // 不支持传递回调(因为this实例已经创建可以获取到,所以没必要)
 next()
 },
 beforeRouteLeave (to, from, next) {
 // 导航离开该组件的对应路由时调用
 // 可以访问组件实例 `this`
 // 该导航可以通过 next(false) 来取消。
 const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
 if (answer) {
 next()
 } else {
 // 不支持传递回调(因为this实例已经创建可以获取到,所以没必要)
 next(false)
 }
 }
}

注意:在刷新当前页面时候,beforeRouteLeave不会触发,它只在进入到其他页面时候才会触发,但是beforeRouteEnter会在刷新的时候触发。

通过beforeRouteLeave这个路由钩子,我们就可以在用户要离开此页面时候进行提示了!

beforeRouteLeave (to, from, next) {
 const answer = window.confirm('当前页面数据未保存,确定要离开![image](http://note.youdao.com/favicon.ico)?')
 if (answer) {
 next()
 } else {
 next(false)
 }
 }

显示的提示框如下:



监听浏览器的刷新、页面关闭事件

但是,这个时候就实现了我们最终的需求了么?并没有,还有一步:用window.onbeforeunload监听浏览器的刷新事件,当然为了防止从当前单页面跳到其他页面之后,在刷新所在新的页面还会触发window上的onbeforeunload的问题,我们不仅要及时的添加onbeforeunload事件,更要及时删除此事件,下面有两种解决方法可供选择:

通过判断它的路由是否是当前需要添加禁止刷新的页面

mounted() {
 window.onbeforeunload = function (e) {
 if(_this.$route.fullPath =="/layout/add"){
 e = e || window.event;
 // 兼容IE8和Firefox 4之前的版本
 if (e) {
 e.returnValue = '关闭提示';
 }
 // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
 return '关闭提示';
 }else{
 window.onbeforeunload =null
 }
}
};

在destory或者beforeDestory的生命周期中直接将onbeforeunload事件置空

mounted() {
 window.onbeforeunload = function (e) {
 e = e || window.event;
 // 兼容IE8和Firefox 4之前的版本
 if (e) {
 e.returnValue = '关闭提示';
 }
 // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
 return '关闭提示';
 }
};
destroyed() {
 window.onbeforeunload = null
 }

显示的提示框如下:



总结

最终,在beforeRouteLeave和onbeforeunload的共同作用下,这个刷新、跳转或者关闭等情况下需要提示保存的需求完美解决!但是,还有一点点小遗憾,就是onbeforeunload中弹框的自定义提示语设置始终无法生效,大家要是有更加合适的处理办法,欢迎多多交流指正!

最后

以下是总结出来最全前端框架视频,包含: javascript/vue/react/angualrde/express/koa/webpack 等学习资料。

【领取方式】

关注头条 前端全栈架构丶第一时间获取最新前端资讯学习

手机用户可私信关键词 【前端】即可获取全栈工程师路线和学习资料!

文地址:https://markodenic.com/html-tips/

Marko 2020年4月12日

在这篇文章中,我很兴奋地与您分享一些非常有用的HTML小技巧。

*文章会定期更新,假如有新的小技巧的话。

但是首先,什么是HTML?

超文本标记语言(HTML)是设计用来在浏览器中显示文档的标准标记语言。它能够获得诸如级联样式表(CSS)、JavaScript等脚本语言技术的支持。

我们开始吧

1、loading="lazy"属性

性能小技巧,我们能够通过使用loading=lazy属性,去推迟图片的加载,直到用户滚动看到它们。

<img src='image.jpg' loading='lazy' alt='Alternative Text'>

2、邮箱、电话和短信的链接:

<a href="mailto:{email}?subject={subject}&body={content}">
  Send us an email
</a>

<a href="tel:{phone}">
  Call us
</a>

<a href="sms:{phone}?body={content}">
  Send us a message
</a> 

3、有序列表的"start"属性

通过使用"start"属性去改变有序列表的开始点。

4、meter元素

您可以使用<meter>元素来显示数量,无需JavaScript和CSS。

5、HTML的搜索

6、Fieldset元素

您可以使用fieldset元素,在一个web表单中对几个控件和标签(<label>)进行分组。

7、window.open

target="_blank"打开的新页面,新页面中可以访问原始的来源window,通过window.opener。这个可能会有隐含的安全或者性能问题。使用 rel="noopener" 或者 rel="noreferrer"去阻止这种行为。

<a href="https://markodenic.com/" target="_blank" rel="noopener">
	Marko's website
</a> 

8、Base元素

如果您想让您文档中的所有链接都在新的tab页打开,您可以使用base标签:

_self: 载入结果到当前浏览上下文中。(该值是元素的默认值)。

_blank: 载入结果到一个新的未命名的浏览上下文。

_parent: 载入结果到父级浏览上下文(如果当前页是内联框)。如果没有父级结构,该选项的行为和_self一样。

_top: 载入结果到顶级浏览上下文(该浏览上下文是当前上下文的最顶级上下文)。如果没有父级,该选项的行为和_self一样

9、破坏Favicon的缓存

为了能够刷新你网站的favicon,你可以强制浏览器去下载新文件,通过给文件链接后面添加?v=2。

这个在生产环境特别有用,确保你的用户使用的是最新的版本。

<link rel="icon" href="/favicon.ico?v=2" />

10、`spellcheck` 属性

通过spellcheck属性去定义元素是否应该检查拼写错误。

11、原生的HTML滑块

您可以通过使用<input type="range">来创建一个滑块

12、HTML手风琴

您可以使用details元素去创建原生的HTML手风琴

13、`mark` 标记

您可以使用<mark>标记去高亮文本。

14、`download`属性

您可以在链接上使用download属性,去下载您的文件,而不是打开链接。

<a href='path/to/file' download>
  Download
</a>  

15、性能提示

使用图片大小更小的.webp格式,同时提升网站性能。

<picture>
  <!-- load .webp image if supported -->
  <source srcset="logo.webp" type="image/webp">
  
  <!-- 
	Fallback if `.webp` images or <picture> tag 
	not supported by the browser.
  -->
  <img src="logo.png" alt="logo">
</picture> 

16、Video缩略图

使用poster属性指定一张在视频下载时显示的图片,或者一直到用户点击播放按钮。

<video poster="path/to/image">

17、input type="search"

对于你的搜索输入框可以使用type="search",然后你将会免费获得一个清除的按钮。