首页 > 其他分享 >WEB开发中的页面跳转方法总结

WEB开发中的页面跳转方法总结

时间:2023-02-18 11:34:26浏览次数:31  
标签:WEB www url header helloweba 跳转 页面


页面跳转可能是由于用户单击链接、按钮等触发的,也可能是系统自动产生的。页面自动跳转在WEB开发中经常用到,而且根据需求可以采用不同的跳转方式,比如提示操作信息后延时跳转等, 本文总结了WEB开发中常见的几种页面跳转方法。

PHP header()函数跳转

PHP的header()函数非常强大,其中在页面url跳转方面也调用简单,使用header()直接跳转到指定url页面,这时页面跳转是302重定向:

$url = "http://www.helloweba.com/";   
header( "Location: $url" );

我们有可能会遇到特殊的跳转时,比如网站改版有个页面地址要做301重定向,当然你可以通过web配置rewrite来实现,但现在我要告诉大家,可以使用php的header()函数做301跳转,代码如下:

//301跳转 
header( "HTTP/1.1 301 Moved Permanently" );
header( "Location: $url" );

Meta设置跳转

html中的meta信息里可以直接设置跳转,可以设置跳转延迟时间和跳转url,经常应用,比如支付完了告诉用户支付成功并跳转到订单页面,代码非常简单,就在<head>中加上一句:

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

以上代码表示在5秒钟后页面会自动跳转到http://www.helloweba.com。

Javascript跳转

Javascript跳转也非常简单,直接一句话:

<script> 
window.location.href="http://www.helloweba.com";
</script>

注意,上面这段代码直接跳转后,在目标页面地址中是获取不到来路(referer,也叫来源)的,在实际项目中,遇到有客户要求跳转要带来路(即目标网页可以获取到页面从哪里跳转来的),这时,我们可以用javascript模拟一次点击,然后跳转就满足了客户的需求。

<script>//有来路 
var aa = document.createElement("a");
aa.setAttribute("href","http://www.helloweba.com");
var bodys=document.getElementsByTagName("body")[0];
bodys.appendChild(aa);
aa.click();
</script>

当然,实际开发中我们可以把后面两种方式整合到PHP中去,便于适用各种跳转需求。

标签:WEB,www,url,header,helloweba,跳转,页面
From: https://blog.51cto.com/u_15967457/6065146

相关文章

  • Webpack中Loader和Plugin
    1.首先两者都是为了扩展webpack的功能2.Loader:webpack视一切文件为模块,但webpack原生只能解析js文件,如果想将其他文件也打包的话,就会用到loader。它只专注于转化文件......
  • openwrt_编写动态页面.uHTTPd.lua_独立于luci之外
    openwrt_编写动态页面.uHTTPd.lua_独立于luci之外转载注明来源:本文链接来自osnosn的博客,写于2023-02-17.参考【ExampleofwebinterfaceusinguHTTPdandLua】......
  • 一次web系统的nginx配置恢复
    前言:组里有一个小伙子,为了升级nodejs,安装各种库,把系统给搞崩溃了,无法登录。找运维人员也不行,最后的解决办法换一台机器。幸好原来只有一块盘,所以数据还在。 $mva/b/......
  • Java Web(二)MyBatis
    MyBatis一.MyBatis简介1.什么是MyBatisMyBatis是一款优秀的持久层框架,用于简化JDBC开发MyBatis本是Apache的一个开源项目iBatis,2010年这个项目由apachesoftwarefoundati......
  • Vite 与 Webpack的区别
    1.什么是Vite?Vite是尤雨溪在开发vue3的时候开发的一个web开发构建工具。极速的服务启动:使用原生ESM文件,无需打包!轻量快速的热重载:无论应用程序大小如何,都......
  • 【eslint 插件开发】禁用 location 跳转外部链接
    背景公司h5项目需要为跳转的外部链接统一增加参数。举个例子,假设有如下代码:location.href='https://www.test.com/a?id=xxx'location.replace('https://www.test.co......
  • 交互式Web前端开发最有用的WebGL框架
    JavaScript是创建Web最有用的编程语言之一,尤其是在WebGL库的支持下。有了WebGL,可以很方便地使用HTML5Canvas元素动态生成图形。因此,设计师和开发人员很容易创建流畅的2D......
  • 黑猫web端signature参数逆向分析
    适合小白练手一、断点调试1.查找关键字2.分析nn是一个随机数16位u是固定参数u="$d6eb7ff91ee257475%"时间戳vard=(newDate).getTime()3.随机数生成o......
  • 使用SpringBoot简单实现WebRTC群聊会议室(Mesh方案)
    近期需要做一个类似会议室功能,但网络上大多数是一对一通信,故记录分享希望帮助到有用的人WebRTC一对一聊天原理关于WebRTC建立一对一聊天的模板网上很多,可参考以下博客:spr......
  • 用于交互式Web前端开发最有用的WebGL框架
    JavaScript是创建Web最有用的编程语言之一,尤其是在WebGL库的支持下。有了WebGL,可以很方便地使用HTML5Canvas元素动态生成图形。因此,设计师和开发人员很容易创建流畅的2D......