前端页面自动跳转方法

M1.使用meta元素

<meta http-equiv="refresh" content="5;url=hello.html">
http-equiv="refresh" 是刷新页面, 5是指5秒后执行刷新操作,url是跳转的目的页面地址。
<meta http-equiv="refresh" content="5"> 这行代码的意思是只刷新,不跳转。

Meta Refresh Tag自动转向法: 由于搜索引擎能够读取HTML,而Meta tags也是HTML,所以对于这种自动转向法,搜索引擎能够自动检测出来。因而无论网站的转向出于什么目的,都很容易被搜索引擎视做对读者的误导而受到惩罚。不过,如果跳转延迟时间设置合适,搜索引擎就不会视之为作弊。 页面定时刷新元标识(Meta Refresh Tag)只能放在HTML代码的< HEAD>区里。如代码所示: “5”是延时跳转的时间,单位是秒。如果设为0,就表示立即跳转。从搜索引擎优化的角度出发,一般不希望自动转向有延迟。不过,如果是用Meta Refresh标识进行转向,一定要注意把延迟时间设定成至少10秒以上。

M2.使用script代码

window.location.href = 'hello.html'; 立即跳转到hello.html页面。
setTimeout("window.location.href = 'hello.html'", 5000); 5秒后跳转到hello.html页面。

用javascript实现<big>无延迟</big>自动重定向的好处在于:用户所访问的目标URL不会保留在用户浏览器的历史记录中,如果用户按返回按钮返回,则将回到跳转前的网页,而不是包含javascript自动重定向脚本的跳转页面,所以不会出现当用户点击返回按钮后返回至重定向页,然后该页自动跳转到用户本来想离开的那个页面的尴尬情形。

倒数计数再跳转:
<span id="totalTime">5</span>
<script type="text/javascript"> //M4 倒数计时跳转 var totalTime = document.getElementById('totalTime'); var second = totalTime.textContent; //totalTime.innerText; setInterval('redirect()', 1000); function redirect(){ if(second <= 0){ location.href = 'hello.html'; } totalTime.innerText = --second; } </script>
在当前页面倒数5个数后,页面跳转到hello.html。

M3.使用form表单

<form action="hello.html" method="get" name="myform"></form>
<script type="text/javascript"> document.myform.submit(); </script>
会立马跳转到hello.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,442评论 19 139
  • 22年12月更新:个人网站关停,如果仍旧对旧教程有兴趣参考 Github 的markdown内容[https://...
    tangyefei阅读 35,378评论 22 257
  • 搜索引擎优化(Search engine optimization,简称SEO),指为了提升网页在搜索引擎自然搜索...
    翻滚吧海阔天空阅读 4,186评论 5 14
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 178,321评论 25 709
  • 这一夜 晚风轻拂 扬起了路旁的枝叶 寂寥的路上 交替变换的红灯 闪烁的灯光下挥舞的枝叶...
    柔痕阅读 423评论 0 1

友情链接更多精彩内容