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 onload="loadfun()">
<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中存在兼容问题，有时间得测试一下
WebApp 中用 hashchange 做路由解析的更多相关文章
- Gin 路由解析树详解
说明: 无意间看到gin 中有trees的属性,好奇想一探究竟,到底gin是怎样生成路由解析树的? 这是一个测试截图,图中大概可以了解到gin是怎样做路由解析的.配合源码的阅读,解析树大致如下: 通过 ...
- ASP.NET 路由解析
这段时间在读园子里Artech大神的<ASP.NET MVC5框架揭秘>,慢慢地从底层了解了MVC模式的设计思路.下面是一些阅读的总结. 传统的Web Forms应用,URL指向的是具体的 ...
- MVC路由解析---MapRoute
文章引导 MVC路由解析---IgnoreRoute MVC路由解析---MapRoute MVC路由解析---UrlRoutingModule Area的使用 引言 前面我们讲了IgnoreRout ...
- ASP.NET Web API路由解析
前言 本篇文章比较长,仔细思考阅读下来大约需要15分钟,涉及类图有可能在手机显示不完整,可以切换电脑版阅读. 做.Net有好几年时间了从ASP.NET WebForm到ASP.NET MVC再到ASP ...
- AspNet Mvc 路由解析中添加.html 等后缀 出现404错误的解决办法
使用Mvc 有时候我们希望,浏览地址以.html .htm 等后缀名进行结尾. 于是我们就在RouteConfig 中修改路由配置信息,修改后的代码如下 routes.IgnoreRoute(&quo ...
- 使用linux系统做路由转发
使用linux系统(PC机)做路由转发 关键字:linux,Fedora,route,iptables,ip_forward 最近做网络实验,在实验过程中需要用到linux的转发功能,但是遇到一些问题 ...
- WebApi路由解析增加版本控制
1.自定义路由解析类 public class VersionHttpControllerSelector : IHttpControllerSelector { private const stri ...
- Linux/Centos下使用mtr做路由图进行网络分析
工具作用: mtr可以做路由图供我们分析哪里出现故障或者是否存在有网络拥塞的情况 1. 首先安装mtr 工具 使用yum 安装 : yum install mtr -y 2. 使用 我经常在工 ...
- vue-router做路由拦截时陷入死循环
今天分享一下使用vue-router做路由拦截时遇到的坑. 需要提前了解的api 1:router.beforeEach( to , from ,next) ; to: Route: 即将要进入的目标 ...
随机推荐
- mxGraph实现按住ctrl键盘拖动图形实现复制图形功能
实现这个功能很easy,仅仅须要重写moveCells方法就能够了.以下是源文件里的代码: mxGraph.prototype.moveCells = function(cells, dx, dy, ...
- PHP面向对象之旅：模板模式(转)
抽象类的应用就是典型的模版模式 抽象类的应用就是典型的模版模式,先声明一个不能被实例化的模版,在子类中去依照模版实现具体的应用. 我们写这样一个应用: 银行计算利息,都是利率乘以本金和存款时间,但各种 ...
- linux共享windows资料
linux 只有NTFS格式不能访问,其的都可以.1.用fdisk -l 查看分区表．2.然后用mount -t vfat /mnt/hda1 /dev/hda1 就可以了．/mnt/hda1是一普通 ...
- Java基础知识强化之集合框架笔记22：List集合的三个子类的特点（面试题）
1. List:(面试题List的子类特点)(1)ArrayList: 底层数据结构是数组,查询快,增删慢. 线程不安全,效率高.(2)Vector: 底层数据结构是数组,查询快,增删慢. 线程安全, ...
- frame模型
#import "CZWeiboFrame.h" #import "CZWeibo.h" @implementation CZWeiboFrame #defin ...
- Linux软件安装，RPM与YUM
为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/3843955.html ...
- bootstrap01登录小例子
引入需要的bootstrap文件 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...
- 给Sublime Text2安装轻量级代码提示插件：SublimeCodeIntel
步骤: 1.下载SublimeCodeIntel(地址https://github.com/SublimeCodeIntel/SublimeCodeIntel): 2.将下载的压缩包解压,并放置在Pa ...
- 一次利用MSSQL的SA账户提权获取服务器权限
遇到小人,把服务器整走了 自己手里只有sql server的sa账号密码 模糊记起之前用这个账户提权读取文件的事 百度之,发现相关信息一堆堆 各种工具也用了不少 发现不是语法错误就是权限不够 无奈之下 ...
- TFS 服务器更换后工作区无法绑定
需要删除工作区,删除命令如下 tf workspace /delete 工作区名;创建的用户 /server:TFS服务器 例 tf workspace /delete WHQ-PC;whq /ser ...