- 浏览: 554752 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (233)
- CSS (12)
- J2SE学习 (16)
- J2EE (6)
- JavaScript (38)
- Struts 1.x (2)
- SQL (9)
- Hibernate (5)
- TYPO3 (1)
- Mysql (10)
- Drupal (14)
- 生活 (10)
- PHP (40)
- Linux (15)
- 口语 (2)
- Magento (8)
- Dotnet (2)
- 正则 (2)
- Android ADB shell (1)
- Android (7)
- HTTP (4)
- Android API (2)
- eclipse (1)
- JAVA (4)
- 数据结构 (3)
- 集合 (1)
- IoC(反向控制) (2)
- 设计模式 (3)
- WebView (2)
- 算法 (6)
- smsniff (1)
- VIM (7)
- iOS (4)
- gcc (2)
- xcode (1)
- Mac (5)
- opencv (3)
- cmake (2)
- git (1)
- html5 (1)
- audio (1)
- apache (3)
- shell (1)
- 工作感悟 (1)
最新评论
-
jiyilee:
的确,不少命令都不能用,不方便啊。。
Apple:如何在iphone、ipad上安装一些常用命令行命令 -
idong杨:
[url][url][url][url][url][/url] ...
php中将SimpleXMLElement Object数组转化为普通数组 -
idong杨:
...
php中将SimpleXMLElement Object数组转化为普通数组 -
wcily123:
递归删除指定目录下的.git文件find . -name .g ...
Linux上批量删除.svn目录 -
yilinsitian:
受教了,好像Socket通信超时机制 还没有说吧
Android·HTTP超时机制
看sencha-touch-1.1.1源码的时候发现,他们对浏览器的历史记录控制是用window.location.hash,搜了一下发现在ajax应用里的确有这样的用法。但是搜到的文章里也没具体说点击返回的时候,window.location.hash改变事件具体是怎么处理?自己捣鼓了半天也没弄出来。。T_T
先把代码贴出来吃晚饭继续~
其他参考连接:
AJAX Navigation (window.location.hash)
https://developer.mozilla.org/en/DOM/window.onhashchange
On - window.location.hash - change?
原文
location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一个非常有意义的事情。
很多人都喜欢收藏网页,以便于以后的浏览。不过对于Ajax页面来说的话,一般用一个页面来处理所有的事务,也就是说,如果你浏览到一个Ajax页面里边有意思的内容,想将它收藏起来,可是地址只有一个呀,下次你打开这个地址,还是得像以往一样不断地去点击网页,找到你钟情的那个页面。另外的话,浏览器上的“前进”“后退”按钮也会失效,这于很多习惯了传统页面的用户来说,是一个很大的使用障碍。
那么,怎么用location.hash来解决这两个问题呢?其实一点也不神秘。
比如,我的作者管理系统,主要功能有三个:普通搜索、高级搜索、后台管理,我分别给它们分配一个hash值:#search、#advsearch、#admin,在页面初始化的时候,通过window.location.hash来判断用户需要访问的页面,然后通过javascript来调整显示页面。比如:
通过window.location.hash=hash这个语句来调整地址栏的地址,使得浏览器里边的“前进”、“后退”按钮能正常使用(实质上欺骗了浏览器)。然后再根据hash值的不同来显示不同的面板(用户可以收藏对应的面板了),这就使得Ajax页面的浏览趋于传统化了。
先把代码贴出来吃晚饭继续~
<!DOCTYPE html> <html> <head> <title> window.location.hash属性介绍 </title> <script> function selectPanel(panel){ window.location.hash = '#' + panel; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById('panel').innerHTML = xmlhttp.responseText; } } var newtarget = 'http://localhost/hash/action.php?' + "a=" + panel + '&h' +Math.random() * 10000000000000000; xmlhttp.open("GET", newtarget, true); xmlhttp.send(); } document.addEventListener('hashchange', hashchange, false); function hashchange(){ var hash; if(!window.location.hash) return ''; hash=window.location.hash; alert(hash); window.location.hash=hash; //调整地址栏地址,使前进、后退按钮能使用 switch(hash){ case "#search": selectPanel("search"); break; case "#advsearch": selectPanel("advsearch"); break; case "#admin": selectPanel("admin"); break; default: //selectPanel("search"); } } </script> </head> <body> <div id="panel">Welecome :)</div> <ul> <li><a href="#search" onclick="selectPanel('search')">#search</a></li> <li><a href="#advsearch" onclick="selectPanel('advsearch')">#advsearch</a></li> <li><a href="#admin" onclick="selectPanel('admin')">#admin</a></li> </ul> </body> </html>
<?php $a = $_GET['a']; switch($a){ case 'search': echo 'search panel'; break; case 'advsearch': echo 'advsearch panel'; break; case 'admin': echo 'admin panel'; break; } exit;
其他参考连接:
AJAX Navigation (window.location.hash)
https://developer.mozilla.org/en/DOM/window.onhashchange
On - window.location.hash - change?
原文
location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一个非常有意义的事情。
很多人都喜欢收藏网页,以便于以后的浏览。不过对于Ajax页面来说的话,一般用一个页面来处理所有的事务,也就是说,如果你浏览到一个Ajax页面里边有意思的内容,想将它收藏起来,可是地址只有一个呀,下次你打开这个地址,还是得像以往一样不断地去点击网页,找到你钟情的那个页面。另外的话,浏览器上的“前进”“后退”按钮也会失效,这于很多习惯了传统页面的用户来说,是一个很大的使用障碍。
那么,怎么用location.hash来解决这两个问题呢?其实一点也不神秘。
比如,我的作者管理系统,主要功能有三个:普通搜索、高级搜索、后台管理,我分别给它们分配一个hash值:#search、#advsearch、#admin,在页面初始化的时候,通过window.location.hash来判断用户需要访问的页面,然后通过javascript来调整显示页面。比如:
var hash; hash=(!window.location.hash)?"#search":window.location.hash; window.location.hash=hash; //调整地址栏地址,使前进、后退按钮能使用 switch(hash){ case "#search": selectPanel("pnlSearch"); //显示普通搜索面板 break; case "#advsearch": case "#admin": }
通过window.location.hash=hash这个语句来调整地址栏的地址,使得浏览器里边的“前进”、“后退”按钮能正常使用(实质上欺骗了浏览器)。然后再根据hash值的不同来显示不同的面板(用户可以收藏对应的面板了),这就使得Ajax页面的浏览趋于传统化了。
发表评论
-
iframe获取父级url
2013-08-14 11:09 3465iframe获取父级url 通过js获取父级iframe u ... -
Document.querySelectorAll
2012-02-20 16:27 1443Document.querySelectorAll Summ ... -
[转]data类型的Url格式:把小数据直接嵌入到Url中
2012-02-06 16:13 1445所谓"data"类型的 ... -
Javascript的变量与delete操作符
2012-02-06 12:28 715刚刚看到一篇好文(原文链接), 对Javascript中的de ... -
jQ.Mobi源代码
2012-02-02 15:38 4011/* jshint newcap:false */ ... -
WebView再探
2012-02-02 11:04 1506从 WebView初探 了解到WebView的强大,。听说We ... -
Android的webview研究
2012-02-01 20:50 18140最近做的项目大量用到了 webview ,用网页来布局。 An ... -
javascript var与变量作用域
2011-07-11 14:32 928var a=10; //正确 a=10; //正 ... -
Getting Div Height using JavaScript
2011-01-20 12:05 850.clientHeight is the browser vi ... -
ie 怪异模式下 position fixed javascript 实现
2010-12-23 00:13 1510<!DOCTYPE HTML PUBLIC " ... -
收集关于scrollTop信息
2010-12-23 00:09 1017要获取当前页面的滚动条纵坐标位置,用: document.do ... -
jquery radio checkbox select 操作
2010-09-10 15:22 1206jquery radio取值,checkbox取值,selec ... -
Javascript 事件冒泡
2010-04-16 14:40 1074W3C工作草案中描述的那样。 1.所有的元素都能够产生事 ... -
jQuery 动态解析html
2010-03-11 15:21 5258<html> <head> &l ... -
Javascript 字符串中的换行
2010-03-09 13:14 2629例如: var Showdiv2="<div ... -
匈牙利类型标记法
2010-02-24 20:54 1145匈牙利类型标记法——在以Pascal标记法命名的变量前附加一个 ... -
if(!document.all) 的含义
2010-02-23 11:21 5398一种一般用作识别IE浏览器的方法. 可以判断兼容性 IE下 ... -
Javascript 作用域问题
2010-02-22 18:23 880函数里就是局部的,外面设置就是全局的,如果同名的话,局部的会覆 ... -
JavaScript中的事件传播 捕捉、发生、起泡
2010-02-22 15:43 1179首先你要明白一点,当 ... -
Javascript 动态给控件添加事件
2010-02-22 15:30 2531<html> <head> ...
相关推荐
NULL 博文链接:https://hugang357.iteye.com/blog/1833003
利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要 在同一客户端就行,跨应用程序, 可以跨域。...
88.window.location的属性: protocol(http:),hostname( ("/a/a.html"),hash("#giantGizmo",指跳转到相应的锚记),href(全部的信息) 89.window.location.reload()刷新当前页面. 90.window.history.back()返回上一页,...
88.window.location的属性: protocol(http:),hostname(www.example.com),port(80),host(www.example.com:80),pathname("/a/a.html"),hash("#giantGizmo",指跳转到相应的锚记),href(全部的信息) 89.window.location....
window . location . origin ; //=> "http://localhost:8888" 安装 包管理器 bower install location-origin npm install location-origin // You don't have to assign it to a variable. // It automatically ...
但是 location.hash可以获取或设置页面的 标签值 比如http://domain/#testDemo中 咱们的location.hash 就是 #testDemo 下面引用一个 网上的demo 一个搜索版块,功能有3个:普通搜索,高级搜索,后台管理,分别指明他们...
9.26 hash 属性 9.27 Href 属性 9.28 pathname 属性 9.29 Protocol 属性 第10 章 history 对象 第11 章 layer 对象. 11.30 layer 属性. 11.31 layer 对象的方法 11.32 JavaScript 操作层 第12 章字符串对象...
/^\w+:\/\//.test(a)){var c=window.location,d=c.port?":"+c.port:"",e=c.protocol+"//"+c.host.split(":").shift()+d;if(a.indexOf("/")===0)a=e+a;else{var f=c.pathname.split("/");f.pop(),a=e+f.join("/")+"/...
location.hash 下面就来介绍下这两种方式具体怎么实现的 一.history 1.history基本介绍 window.history 对象包含浏览器的历史,window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由...
Arc Reactor JavaScript库/框架 Vishva Kumara 根据MIT许可分发 Font-Awsome和Roboto Font在... 使用哈希网址,浏览器后退按钮会将用户带到上一个屏幕/状态 将功能附加到每个导航点 通过各种选项和良好的控制发出A
众所周知,vue-router有两种模式,hash模式和history模式,... let hash = location.hash.slice(1); document.body.style.color = hash; } 上面的代码可以通过改变hash来改变页面字体颜色,虽然没什么用,但是一定程度
window.location.hash="position"; } ()" background="images\4.jpg"> <!-- dataValue.jsp��������Ϣ����ݼ���ҳ��--> <iframe src="dataValue.jsp" id="dataValue" style="visibility:hidden; ...
$anchorScroll 根据HTML5的规则,当调用这个函数时,它检查当前的...hash 将会指定元素滚动到的位置,如果省略参数,则将使用$location.hash() 作为默认值。 属性:number function(){} jqLite 如果设置了这个值,将会
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521) // Strict HTML recognition (#11290: must start with <) rquickExpr = /^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$/, //匹配一个独立的标签 ...
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521) // Strict HTML recognition (#11290: must start with <) rquickExpr = /^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$/, //匹配一个独立的标签 ...
4.12 Window 窗口对象的属性 4.13 Window 窗口对象的方法 4.14 创建和关闭窗口 第5 章 document 对 象 5.15 document 对象的属性 5.16 document 对象的方法 第6 章 文 本 对 象 6.17 文本对象属性 6.18 文本对象的...
本文利用node.js 实现前端...包含以下几种:1.cors 2.jsonp 3.window.name+iframe 4.location.hash+iframe 5.HTML5 postMessage 6.nginx 反向代理 7.node.js + express + http-proxy-middleware8.webSocket具体教程见
分享转载:前端常见跨域解决...3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享(CORS) 7、 nginx代理跨域 8、 nodejs中间件代理跨域 9、 WebSocket协议跨域
我们可以通过 location 对象的hash属性获取当前哈希部分(如'#red'包括'#'号)。我们可以用 Array 和 Object 来实现浏览器的前进后退功能。具体原理可参见代码中的注释。h5路由通过在 window 对象上监听 popstate ...