信
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官网查看介绍:
组件级别路由钩子分为三种:
具体的介绍和写法如下:
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('当前页面数据未保存,确定要离开?') 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)是设计用来在浏览器中显示文档的标准标记语言。它能够获得诸如级联样式表(CSS)、JavaScript等脚本语言技术的支持。
性能小技巧,我们能够通过使用loading=lazy属性,去推迟图片的加载,直到用户滚动看到它们。
<img src='image.jpg' loading='lazy' alt='Alternative Text'>
<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>
通过使用"start"属性去改变有序列表的开始点。
您可以使用<meter>元素来显示数量,无需JavaScript和CSS。
您可以使用fieldset元素,在一个web表单中对几个控件和标签(<label>)进行分组。
用target="_blank"打开的新页面,新页面中可以访问原始的来源window,通过window.opener。这个可能会有隐含的安全或者性能问题。使用 rel="noopener" 或者 rel="noreferrer"去阻止这种行为。
<a href="https://markodenic.com/" target="_blank" rel="noopener">
Marko's website
</a>
如果您想让您文档中的所有链接都在新的tab页打开,您可以使用base标签:
_self: 载入结果到当前浏览上下文中。(该值是元素的默认值)。
_blank: 载入结果到一个新的未命名的浏览上下文。
_parent: 载入结果到父级浏览上下文(如果当前页是内联框)。如果没有父级结构,该选项的行为和_self一样。
_top: 载入结果到顶级浏览上下文(该浏览上下文是当前上下文的最顶级上下文)。如果没有父级,该选项的行为和_self一样
为了能够刷新你网站的favicon,你可以强制浏览器去下载新文件,通过给文件链接后面添加?v=2。
这个在生产环境特别有用,确保你的用户使用的是最新的版本。
<link rel="icon" href="/favicon.ico?v=2" />
通过spellcheck属性去定义元素是否应该检查拼写错误。
您可以通过使用<input type="range">来创建一个滑块
您可以使用details元素去创建原生的HTML手风琴
您可以使用<mark>标记去高亮文本。
您可以在链接上使用download属性,去下载您的文件,而不是打开链接。
<a href='path/to/file' download>
Download
</a>
使用图片大小更小的.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>
使用poster属性指定一张在视频下载时显示的图片,或者一直到用户点击播放按钮。
<video poster="path/to/image">
对于你的搜索输入框可以使用type="search",然后你将会免费获得一个清除的按钮。
*请认真填写需求信息,我们会在24小时内与您取得联系。