单页面应用(针对手机端)

关键字:history api+ajax+url route

  • 检测history api是否兼容:

   function supports_history_api() { return !!(window.history && history.pushState); }

1、history api

  1)先熟悉 HTML4 : history.back()以及history.go();

A) history.length:当前历史列表中的历史记录数(我大概测了下,IE6+是从0开始的,其他的是从1开始的;
B) history.go(n):前进或后退n条记录,当n=0或空时会刷新当前页;
C) history.back():后退一步;
D) history.forward():前进一步;

2、HTML5新增的API
A) history.pushState(data, title [, url]):往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会 忽略此参数;url为页面地址,可选,缺省为当前页地址;
B) history.replaceState(data, title [, url]) :更改当前的历史记录,参数同上;
C) history.state:用于存储以上方法的data数据,不同浏览器的读写权限不一样;
D) window.onpopstate:响应pushState或replaceState的调用;

3、ajax 略

4、url route 涉及.net .NET Framework 4.5

帮助文档在 https://msdn.microsoft.com/zh-cn/library/system.web.routing.route.url.aspx

  1. 我们新建一个Login.aspx,有一个超链接 <a href=‘<%=GetRouteUrl("StudentRoute",new {id=1}) %>‘>Test</a>
  2. 之后在Global.asax里面添加RegisterRoutes方法

    void RegisterRoutes(RouteCollection routes)
    {
    routes.MapPageRoute(
    "StudentRoute", //路由名
    "Student/{id}.html", //路由URL
    "~/Test/Student.aspx" //处理路由的网页
    );
    }

    之后在 Application_Start注册一下

    void Application_Start(object sender, EventArgs e)

    {
    // 在应用程序启动时运行的代码
    RegisterRoutes(RouteTable.Routes);
    }
    最好运行效果为:http://localhost:5143/WebSite3/Student/1.html

    调用RouteData.Values["id"],就可以在另一页面取出传递的id了

时间: 2024-10-07 16:48:17

单页面应用(针对手机端)的相关文章

Salesforce 自定义页面并实现手机端自适应

一.使用salesforce实现自定义的"任务签到"页面,实现了百度地图地位功能 1)首先必须创建一个自定义页面 2)创建salesforece对象 3)创建控制器 4)进入页面写代码 二.代码实现 前台页面代码 <apex:page showHeader="false" sidebar="false" standardStylesheets="false" showQuickActionVfHeader="f

手机端页面切图

针对手机端页面,通常情况下,需要对设计图片切两种图片. ①:dpr:2------切两倍图(即设计原图大小,因为设计图是按原来的手机尺寸放大两倍之后的)  一般保存为[email protected] ②:dpr:3------切三倍图(即设计原图大小的1.5倍,因为设计图是按原来的手机尺寸放大两倍之后的)     一般保存为[email protected] 淘宝的做法: 例如:设计图是720px的宽度. 由于设计图是放大两倍的.所以一倍的大小是=720/2 = 360px; 放大三倍图就是=

触动人心的手机端页面设计

随着网络越来越发达,智能手机迅速普及,现在手机端网络已经占据市场的70%.近两年,手机流量从2G一直升级到现在的4G,还有各地免费开放的WIFI.人们从一开始的电脑冲浪,已经大部分时间都转移到如今更加方便携带的手机冲浪上了.在国外,媒体发布了一项关于智能手机的调查报告,据Bistro报道,人们在使用智能手机的时候,有66%在家里,59%在旅途上,52%在乘坐交通工具上,38%在餐厅里,30%在商场里.而使用手机上网的时间,已经远远的超过了打电话的时间,手机带来的便利,使得越来越多的人注意到了手机

一、单页应用如何调用微信接口和手机端的一些方法?

因为angular 是单页应用,所以在调用一些手机端可微信接口的地方会很麻烦,这里总结一下在手机端调用分享和调用微信接口的时候出现的问题及解决的办法: 出现问题: 手机端的方法如果有回调,H5需要调用手机端某个方法的回调时,不管在哪个页面需要回调该方法都无法回调成功 如果做有关微信公众平台接口,在任何页面也是无法调用该接口 解决办法: 出现这种问题的原因是由于angular是单页应用引起的 解决方案:目前只想到一种解决办法就是:在index.html页面申明一个全局变量,然后将手机端或者微信接口

手机端的表单验证和PC端的不同

1.手机端:由于页面小的局限性,表单验证从上到下依次进行,如果上一个验证不通过,则给出错误提示,代码中return回去,不必进行下一个的校验: 2.PC端:页面范围大,一般是在表单的后面或者下面,提示错误信息,故校验时每个都需校验: 3.手机端一般不写blur事件,如上面的用户名校验重复性,减少ajax  http请求,在提交时统一校验.目的是减少用户的等待,增强用户体验性.

做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致

最近在做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致.大家可以查看这个Demo(记得打开Chrome DevTools). 就如上图所示,你可以发现,原本指定的字体大小是24px,但是最终计算出来的却是53px,看到这诡异的结果,我心中暗骂一句:这什么鬼! 随后开始对问题各种排查:某个标签引起的?某个CSS引起的?又或者是某句JS代码引起的.通过一坨坨的删代码,发现貌似都不是.我不禁又骂,到底什么鬼!不过中间还是发现了一些端倪:当页面中的标签数量或者文本数

jQuery手机端上拉刷新下拉加载更多页面

<!doctype html> <html> <head> <title>jquery 手机端上拉刷新下拉加载更多页面</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewpost" content="width=device-wi

rem手机端页面自适应完美解决方案(最新)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> ! function(e) { function t(a) { if(i[a]) return i[a].exports; var n = i[a] = { exports: {},

wap手机端页面根据dpr和宽度计算出font-size对应数值

最近在进行公司的wap端首页改版和添加活动页面,为了做的效果更好一些,就参考淘宝和京东的wap版,然后对淘宝的wap做了一些分析,淘宝的wap触屏版做的自适应和兼容性很不错,于是整理了下. wap手机端页面根据dpr和宽度计算出font-size对应数值表如下: dpr 最小宽度320px 最大宽度540px 系数 1 20px 33.75px 0.0625 2 40px 67.5px 0.125 3 60px 101.25px 0.1875 备注: 1.是按照倍数关系增加的 2.手机淘宝就是按