http://www.html-js.com/article/JavaScript-focus-and-keyboard
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页面的浏览趋于传统化了。
分享到:
相关推荐
在JavaScript编程中,`window.location.hash` 是一个非常重要的属性,它用于获取或设置当前URL的哈希值,也就是URL中“#”后面的部分。这个属性在开发网页应用时经常被用来实现页面内的导航和锚点定位。这篇博客文章...
* window.location.hash:获取 URL 的片断部分。 location.reload() 和 location.replace() 两个方法都可以用于刷新页面,但是它们之间有着明显的区别。location.reload() 方法用于重新加载当前页面,而 location....
`window.location`是`Window`对象的一个属性,它表示当前文档的URL,并且还包含了与URL相关的其他信息。通过这个对象,我们可以获取或设置当前文档的URL,或者读取URL的各个组成部分。 #### `window.location.href`...
在前端开发中,location对象的search和hash属性是两种常用的传参方式,但是它们之间的关系和应用场景却不太为人所知晓。本文将深入探讨location.search与location.hash的区别、应用场景和解决问题的方法。 一、...
下面我们将详细介绍如何利用`window.location`对象的不同属性来获取网址中的各种组成部分。 #### 二、`window.location`对象的主要属性 1. **`window.location.href`**:返回完整的URL(包括协议、主机名、端口、...
以下是对 `window.location` 属性的详细介绍及其各种属性的使用方法。 #### 1. `window.location.href` - **作用**:获取或设置完整的 URL 地址。 - **返回值**:返回完整的 URL 字符串。 - **示例**:`...
同样,`window.location.hash`常用于单页应用中实现平滑滚动至页面内指定区域的效果。 总之,掌握JavaScript处理URL的能力,能够极大地增强Web开发者的技能库,使得创建更加灵活、响应式和用户友好的网页成为可能。
8. `window.location.hash`:返回URL的哈希值,即`#`后面的部分,如`#hash`。 此外,`window.location`对象还提供了`assign()`、`reload()`和`replace()`等方法,用于导航到新的URL、刷新当前页面或替换历史记录中...
此外,`window.location`对象还包含其他属性和方法,如`pathname`、`protocol`、`hostname`等,可以用于获取或修改URL的各个部分。在实际开发中,这些属性和方法常常结合使用,以实现更复杂的导航逻辑。 在提供的...
)之后的部分,`window.location.hash`则是锚点(#)后面的部分。 在Web扩展开发中,例如使用Chrome API,开发者可以利用`chrome.tabs`模块获取当前活动标签页的URL。通过`chrome.tabs.query`方法,传入一个包含`...
`window.location.hash` 是在JavaScript中用于操作URL的锚点(Hash)部分的属性,它在Web开发中常用于实现单页应用(Single-Page Applications, SPA)中的导航和页面状态管理。`window.location` 是一个全局对象,...
除了`href`属性,`window.location`对象还提供了其他有用的属性和方法,如`hash`(URL的哈希部分),`search`(URL的查询字符串),以及`replace()`和`assign()`方法,用于在不添加历史记录的情况下替换当前URL或...
var hash:String = ExternalInterface.call("eval", "window.location.hash"); ``` 这段代码将返回片段标识符部分,例如`#love`。 #### 获取URL参数的实例 为了更好地理解如何处理查询字符串中的参数,下面提供了...
var hash = window.location.hash; // 例如:#imhere // 注意,这里包括 # 号 ``` #### 四、解析 Query(查询参数) 除了以上提到的基本方法外,很多时候还需要进一步解析查询参数。这可以通过对 `search` ...
8. **`window.location.hash`**:返回URL的片段标识符,即井号 "#" 后面的部分,通常用于页面内的锚点定位。 在实际应用中,`window.location` 的这些属性可以用于解析、修改和重定向URL。例如,如果你想在用户点击...
var element = document.getElementById(window.location.hash.replace('#', '')); if (element) { element.scrollIntoView(); } }); ``` 或者使用`scroll`事件: ```javascript window.addEventListener('...
7. 获取 URL 的锚点部分:使用 `window.location.hash` 可以获取 URL 的锚点部分。 例子:`#a1` 此外,我们还可以使用其他方法来获取 URL 的信息,例如: * `document.URL`:获取整个 URL 字符串。 * `document....
除了这些属性,`window.location`对象还包含其他有用的属性和方法,如`window.location.origin`,它返回URL的源,即协议、主机和端口的组合,不包括路径、查询字符串和哈希。此外,还有`window.location.pathname`,...