WebApp 中用 hashchange 做路由解析

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript text</title>
<script src="js/jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
   var url = "#"+window.location.href.split("#")[1];
   Router(url);
   $("a").click(function(){
        var url = $(this).attr("href");
        //Router(url);
   });
   $("input[type=\"button\"]").click(function(){
       var url = $(this).attr("data");
       //Router(url);
	   window.location.href="#windowsubmit";
   });
   function Router(url){
       var bview = $("#view");
       switch(url){
	       case "#windowsubmit":bview.text("我提交了表单"); break;
		   case "#index" : bview.text("我的网站首页");break;
		   case "#detail" : bview.text("关于我们");break;
		   case "#content" : bview.text("我的QQ:602730971");break;
		   default:bview.text("未知的网站未知");break;
	   }
   }
   $(window).bind("hashchange",function(){
      //alert( window.location.href);
	  var url = "#"+window.location.href.split("#")[1];
	  //alert(url);
	  Router(url);
   });
});
</script>
</head>

<body >
<a href="#index">首页</a>
<a href="#detail">关于我们</a>
<a href="#content">联系我们</a>
<fieldset>
    <legend>按钮跳转</legend>
	<input type="button" value="提交事件" onclick="" data="#windowsubmit" />
</fieldset>
<fieldset>
<legend>路由管理</legend>
<div>
<a href="http://www.baidu.com">百度一下</a><br />
<a href="http://www.hao123.com">Hao123网站导航</a><br />
<a href="http://www.163.com">网易新闻</a><br />
<a href="http://www.qq.com">腾讯新闻</a>
</div>
</fieldset>
<fieldset>
<legend>内容控制</legend>
<div id="view">
   adfasdfasdfasdf
</div>
</fieldset>
</body>
</html>

  但是 hashchange 在低版本的IE中存在兼容问题,有时间得测试一下

时间: 2024-10-06 06:53:33

WebApp 中用 hashchange 做路由解析的相关文章

Gin 路由解析树详解

说明: 无意间看到gin 中有trees的属性,好奇想一探究竟,到底gin是怎样生成路由解析树的? 这是一个测试截图,图中大概可以了解到gin是怎样做路由解析的.配合源码的阅读,解析树大致如下: 通过root -> child 的形式,形成一个路由解析树.当请求进来时,如果能匹配上一条线,则进入相应的逻辑了:如果没有匹配的,直接404. 其它内部的解析,后续再附上. 原文地址:https://www.cnblogs.com/logo-fox/p/8252901.html

ASP.NET 路由解析

这段时间在读园子里Artech大神的<ASP.NET MVC5框架揭秘>,慢慢地从底层了解了MVC模式的设计思路.下面是一些阅读的总结. 传统的Web Forms应用,URL指向的是具体的物理文件,而ASP.NET MVC应用一般指向的是某个Controller中的某个Action方法.URL与目标Controller/Action之间的映射关系是通过“路由”来实现的. 路由系统中的几个核心类的描述: RouteBase 一个抽象基类. public abstract class RouteB

Yii源码阅读笔记 - 路由解析

2014-11-12 三 By youngsterxyf 概述 Yii框架的路由解析功能由核心组件urlManager来完成.路由的形式有两种: get:通过URL中查询字符串(query string)参数r来指定路由,如:r=controllerID/actionID path:直接通过URL来指定,如:/controllerID/actionID 默认使用get路由形式.由于Yii中controller类命名和action方法都是按照规则命名的,而路由也是按照规则来匹配的,所以完全可以不用

react做路由跳转,路由传参 &#340936;

原文: http://blog.gqylpy.com/gqy/496 置顶:来自一名75后老程序员的武林秘籍--必读(博主推荐) 来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我

php7扩展开发[11] MVC之路由解析和加载文件

```场景:想要用C实现PHP的一个MVC结构的路由解析和加载文件的功能,一共要解决几个问题1.由于MVC要加载多个C文件,所以要修正config.m4,修改config.m4内容第十行左右,去掉dnl,PHP_ARG_WITH(dora, for route support,dnl Make sure that the comment is aligned:[  --with-route             Include dora support])在下面追加到以下内容:if test

2015.1.5 用DBFactorySingleton写、读二进制字段与oralce CLOB类型字段读写[除非需要做内部解析,不要用CLOB,CLOB速度要比BLOB慢15倍以上]

//写 FileStream fstr = File.OpenRead(tb_filepath.Text); //openread函数用于打开只读文件,openwrite可写 BinaryReader br = new BinaryReader(fstr); byte[] buffer = br.ReadBytes((int)fstr.Length); string sql = string.Format("insert into NVDUSER_FLT.FILE_SOURCE values(1

AspNet Mvc 路由解析中添加.html 等后缀 出现404错误的解决办法

使用Mvc 有时候我们希望,浏览地址以.html .htm 等后缀名进行结尾. 于是我们就在RouteConfig 中修改路由配置信息,修改后的代码如下 routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( name: "Default", url: "{controller}/{action}.html", defaults: new { controller =

使用linux系统做路由转发

使用linux系统(PC机)做路由转发 关键字:linux,Fedora,route,iptables,ip_forward 最近做网络实验,在实验过程中需要用到linux的转发功能,但是遇到一些问题,在请教了linux网络技术的网友后终于把它解决了,解决了之后我开始总结之前失败的原因,并将历程写成博文,供以后遇到这类问题的各位朋友参考借鉴. 1.网络拓扑 网络拓扑如下所示,我们在这里用到了三台机子做实验,分别是①.④.⑦号机,使用①号机ping⑦号机,④号机作为路由转发. 2.错误的路由配置

TtinkPHP学习笔记之路由解析

TP框架URL地址可以有以下几种: http://域名/index.php?m=模块&c=控制器&a=方法         基本get模式 http://域名/index.php/模块/控制器/方法                         路径模式pathinfo http://域名/模块/控制器/方法                                         rewrite重写模式(需要apache开启对.htaccess的支持) http://域名/ind