JavaScript的location和history用法
location的用法js
location的用法js使用location的方法和属性来操作URL`location`是JavaScript中的一个对象,它提供了方法和属性来操作URL。
URL是网址的标识符,它包含了网站的域名、路径和其他参数等信息。
在这篇文章中,我们将学习如何使用`location`对象来操作URL。
1. 获取当前URL首先,让我们看一下如何获取当前页面的URL。
`location`对象的`href`属性返回当前页面的URL字符串。
javascriptconsole.log(location.href);以上代码将在控制台输出当前页面的URL。
2. 改变当前URL有时候,我们可能需要改变当前页面的URL。
`location`对象的`assign()`方法可以用于这个目的。
javascriptlocation.assign("上述代码将把当前页面的URL重定向到`3. 重载当前页面如果我们希望刷新当前页面,可以使用`reload()`方法。
javascriptlocation.reload();这个方法将重新加载当前页面,相当于用户点击浏览器的刷新按钮。
4. 获取URL的各个部分`location`对象的其他属性可以帮助我们获取URL的不同部分。
- `hostname`属性返回URL的主机名,例如`- `pathname`属性返回URL的路径名,例如`/blog/post/123`。
- `search`属性返回URL的查询字符串,例如`?id=123&category=javascript`。
javascriptconsole.log(location.hostname);console.log(location.pathname);console.log(location.search);5. 解析查询参数通过解析查询参数,我们可以轻松地获取URL中的参数值。
`search`属性返回的是一个包含所有查询参数的字符串,我们可以使用`URLSearchParams`对象来解析它。
js中的window对象的用法
js中的window对象的用法window对象是JavaScript中的顶级对象,它代表了浏览器的窗口或者框架。
通过window对象,我们可以访问和操作浏览器窗口的属性和方法。
下面是关于window对象常用的一些属性和方法的详细解释。
1. window.alert(message): 这个方法用于显示一个带有一条指定信息和一个确认按钮的警告对话框。
当对话框弹出时,脚本的执行将暂停。
2. window.prompt(message, default): 这个方法会显示一个对话框,提示用户输入文本。
message参数是一个字符串,用于指定对话框中要显示的文本。
default参数是一个可选参数,用于指定在文本框中显示的默认值。
3. window.document: 这个属性指向当前窗口中打开的文档对象。
通过document对象,我们可以访问和操作文档的内容,比如创建、修改或删除元素、修改样式等。
4. window.location: 这个属性用于获取或者设置当前窗口的URL地址。
当设置该属性时,浏览器会导航到指定的URL。
5. window.history: 这个属性用于访问浏览器的历史记录。
我们可以使用history对象的方法,比如back(和forward(来后退和前进浏览历史记录。
6. window.navigator: 这个属性提供了关于浏览器的相关信息,比如浏览器的名称、版本和操作系统等。
7. window.innerWidth / window.innerHeight: 这两个属性分别表示窗口的宽度和高度,不包括浏览器的工具栏、滚动条等。
10. window.onload: 这个事件会在整个文档和相关资源(如图像和样式表)都加载完成后触发。
可以通过给这个事件赋值一个函数,来实现在页面加载完成后执行特定的操作。
11. window.onresize: 这个事件会在窗口大小发生变化时触发。
我们可以通过给这个事件赋值一个函数,来在窗口大小发生变化时执行特定的操作。
javascript history 用法
javascript history 用法在JavaScript中,我们可以使用`history`对象来管理浏览器的会话历史记录。
`history`对象提供了一些方法和属性来操纵和获取浏览器历史记录。
下面是一些常用的`history`对象的用法:1. `history.back()`: 这个方法用于导航到上一个页面,等同于用户点击浏览器的后退按钮。
2. `history.forward()`: 这个方法用于导航到下一个页面,等同于用户点击浏览器的前进按钮。
3. `history.go(n)`: 这个方法用于导航到相对于当前页面的某个特定页面,其中`n`可以是正数或负数。
例如,`history.go(-1)`等同于`history.back()`,`history.go(1)`等同于`history.forward()`。
4. `history.pushState(stateObj, title, url)`: 这个方法用于向浏览器历史记录中添加一个新的状态,并且不会导致页面的刷新。
`stateObj`是一个JavaScript对象,表示新的状态数据,`title`是可选的,表示新页面的标题,`url`是可选的,表示新页面的URL。
注意,这个方法只会添加新的历史记录,不会立即导航到新的页面。
5. `history.replaceState(stateObj, title, url)`: 这个方法用于替换当前页面的状态,并且不会导致页面的刷新。
与`pushState`方法类似,但是会替换当前的历史记录,而不是添加新的历史记录。
6. `history.state`: 这个属性返回当前页面的状态对象,如果没有设置状态对象则返回`null`。
需要注意的是,由于浏览器的安全限制,JavaScript只能操作用户的浏览器历史记录,而不能直接修改URL。
因此,使用`pushState`和`replaceState`方法时,URL的改变不会立即导致页面的刷新,需要配合其他的操作来实现页面的更新。
js中window对象中location的使用方法
js中window对象中location的使用方法JS中window对象中location的使用方法一、window对象简介在JavaScript中,window对象代表了当前浏览器窗口或窗体,并且是全局对象,即可以直接访问。
window对象包含了许多有用的属性和方法,其中之一就是location属性。
location属性提供了访问和操作浏览器URL的功能。
二、使用location属性获取URL信息1.获取完整的URL:`window.location.href`当我们需要获取当前页面的完整URL时,可以使用`window.location.href`属性。
例如:javascriptconsole.log(window.location.href); 输出当前页面的完整URL2.获取域名:`window.location.hostname`如果我们仅需要获取当前页面的域名部分,可以使用`window.location.hostname`属性。
例如:javascriptconsole.log(window.location.hostname); 输出当前页面的域名3.获取路径:`window.location.pathname`如果我们需要获取当前页面的路径部分,可以使用`window.location.pathname`属性。
例如:javascriptconsole.log(window.location.pathname); 输出当前页面的路径4.获取协议:`window.location.protocol`要获取当前页面的协议部分(如http、https),可以使用`window.location.protocol`属性。
例如:javascriptconsole.log(window.location.protocol); 输出当前页面的协议5.获取查询参数:`window.location.search`当我们需要获取当前页面的查询参数部分时,可以使用`window.location.search`属性。
js路由跳转的几种方式
js路由跳转的几种方式在JavaScript中,路由跳转通常用于在单页面应用程序(SPA)中切换不同的视图或页面。
以下是几种常见的JavaScript路由跳转方式:1. 使用`window.location` 对象:```javascript// 导航到新的URLwindow.location.href = '';// 替换当前URL,无法回退window.location.replace('');```2. 使用`window.location.assign()`:```javascriptwindow.location.assign('');```3. 使用`<a>` 元素:```html<!--在HTML中添加一个链接--><a href="" id="myLink">跳转</a><!--使用JavaScript点击链接--><script>document.getElementById('myLink').click();</script>```4. 使用框架或库的路由功能:-许多JavaScript框架和库(如React、Vue、Angular等)提供了自己的路由系统。
通常,它们会提供一些方法或组件,用于导航到不同的视图。
- React Router例子:```javascriptimport { BrowserRouter as Router, Route, Link } from 'react-router-dom';function App() {return (<Router><div><nav><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li></ul></nav><Route path="/" exact component={Home} /><Route path="/about" component={About} /></div></Router>);}```5. 使用`history` 对象:- HTML5提供了`history` 对象,可以用于在浏览器历史中进行导航。
js跳转新页面的几种方法
js跳转新页面的几种方法在JavaScript中,有多种方法可以实现跳转到新页面。
下面是几种常见的方法:1. 使用location.href 方法:javascriptlocation.href = "这种方法是直接修改`location` 对象的`href` 属性,将其值设置为目标页面的URL。
当执行这行代码时,浏览器会立即跳转到新页面。
2. 使用location.assign 方法:javascriptlocation.assign("这个方法与`location.href` 方法类似,也是用于跳转到新页面。
它将目标页面的URL 作为参数,并将其赋值给`location` 对象的`href` 属性。
3. 使用location.replace 方法:javascriptlocation.replace("这种方法也可以用于跳转到新页面,但与前两种方法不同的是,它不会在浏览器的历史记录中生成新的记录。
也就是说,用户无法通过浏览器的“后退”按钮返回到前一个页面。
4. 使用window.open 方法:javascriptwindow.open("这是一种在新窗口或标签页中打开目标页面的方法。
当执行这行代码时,浏览器会弹出一个新的窗口或标签页,并在其中加载目标页面。
5. 使用form 提交:html<form id="myForm" action=" method="GET"><input type="submit" value="Go"></form><script>document.getElementById("myForm").submit();</script>这种方法不是直接使用JavaScript 来实现跳转,而是利用一个隐藏的表单,将其目标地址设置为目标页面的URL,并通过JavaScript 代码触发表单的提交动作,从而实现跳转到新页面。
js刷新页面的几种方法
js刷新页面的几种方法
1.使用location.reload()方法:该方法会重新加载当前页面,包括所有资源(如图片、脚本),并重置浏览器的缓存。
可以在事件处理函数中使用该方法实现刷新页面的效果。
2. 使用 location.href 属性:该属性可以设置或获取当前页面的 URL,通过将其设置为当前页面的 URL,可以实现刷新页面的效果。
例如:location.href = location.href;
3. 使用 window.location.replace() 方法:该方法会将当前页面替换为一个新的页面,并且不会留下浏览器的历史记录。
可以在事件处理函数中使用该方法实现刷新页面的效果。
4. 使用 history.go(0) 或 history.back() 方法:这两个方法都可以实现刷新页面的效果,但是 history.back() 方法会将页面返回到浏览器的历史记录,而 history.go(0) 方法则相当于刷新当前页面。
可以在事件处理函数中使用这两个方法实现刷新页面的效果。
- 1 -。
js文件获取路由参数
js文件获取路由参数要在JavaScript文件中获取路由参数,你需要使用JavaScript中的window.location对象和window.history对象。
具体步骤如下:1. 使用window.location对象获取当前URL的信息,包括路径名和查询参数。
可以使用以下代码获取路径名:```javascriptconst pathname = window.location.pathname;```2. 获取查询参数。
如果你的查询参数是以问号(?)开头的,那么可以使用以下代码获取查询参数:```javascriptconst queryString = window.location.search;const params = new URLSearchParams(queryString);const paramsArray = params.keys().map(key => key);const queryParams = {};paramsArray.forEach(key => {queryParams[key] = params.get(key);});console.log(queryParams);```3. 如果你的查询参数不是以问号(?)开头的,那么你可以使用以下代码获取查询参数:```javascriptconst queryString = window.location.search.substring(1);const params = new URLSearchParams(queryString);const paramsArray = params.keys().map(key => key);const queryParams = {};paramsArray.forEach(key => {queryParams[key] = params.get(key);});console.log(queryParams);```在上面的代码中,我们使用了window.location对象和window.history 对象来获取当前页面的URL和历史记录,然后使用URLSearchParams 对象来解析查询参数。
history.js用法
history.js用法history.js是一个用于管理浏览器历史记录的JavaScript库,可以在不支持HTML5的浏览器中使用HTML5的history API。
使用history.js,可以实现以下功能:1. 改变URL而不刷新页面。
2. 后退、前进功能,即通过JavaScript 代码模拟浏览器的后退、前进按钮。
3. 监听URL的变化,以便在URL改变时执行相应的操作。
使用步骤:1. 引入history.js库文件到HTML页面中。
html<script src="path/to/history.js"></script>2. 创建一个History对象并初始化。
javascriptvar history = window.History; history.init();3. 使用history对象的方法进行操作。
javascript 改变URLhistory.pushState({state: 1}, "Title 1", "/page1.html"); 后退history.back(); 前进history.forward(); 监听URL变化history.Adapter.bind(window, "statechange", function(){ var state = history.getState(); console.log(state.data, state.title,state.url);});需要注意的是,使用history.js可能需要在服务器环境中才能正常工作,因为浏览器会限制在本地文件系统中使用HTML5的history API。
navigate路径传参数
navigate路径传参数在Web开发中,我们经常需要向服务器传递参数。
其中一种传递参数的方式是通过URL中的查询字符串(query string)来传递参数。
而在使用导航(navigation)时,我们可以使用URL的查询字符串来传递参数。
在使用导航时,我们可以使用JavaScript中的location对象来操作URL。
location对象有一个search属性,该属性返回URL中的查询字符串。
我们可以通过修改该属性来传递参数。
例如,我们有一个页面a.html,需要向页面b.html传递一个参数id=1。
我们可以使用以下代码实现:```javascript// 在a.html中var id = 1;location.href = 'b.html?id=' + id;```在b.html中,我们可以通过以下代码获取传递的参数:```javascript// 在b.html中var search = location.search;var params = new URLSearchParams(search);var id = params.get('id');```其中,URLSearchParams是一个新的API,用于解析URL的查询字符串。
我们可以使用get方法来获取指定参数的值。
除了使用location对象来传递参数外,我们还可以使用history对象来传递参数。
history对象有两个方法pushState和replaceState,可以修改浏览器的历史记录。
这两个方法可以用来传递参数,但是需要注意的是,这种方式只能在同一域名下使用。
例如,我们有一个页面a.html,需要向页面b.html传递一个参数id=1。
我们可以使用以下代码实现:```javascript// 在a.html中var id = 1;history.pushState({id: id}, '', 'b.html');```在b.html中,我们可以通过以下代码获取传递的参数:```javascript// 在b.html中var state = history.state;var id = state.id;```其中,history.state属性返回当前历史记录的状态对象。
javascript history 用法
javascript history 用法(最新版)目录1.JavaScript 概述2.history 对象的含义3.history 对象的属性和方法4.使用 history 对象的实例正文一、JavaScript 概述JavaScript 是一种广泛应用于网页开发的脚本语言,它可以使网页具有交互性,为用户提供更加丰富的体验。
在 JavaScript 中,有一个非常重要的对象——history,它用于管理浏览器的历史记录。
二、history 对象的含义history 对象代表了浏览器的历史记录,它可以用来访问和操作用户访问过的页面。
通过 history 对象,我们可以实现一些与浏览器历史记录相关的功能,如后退、前进、刷新等。
三、history 对象的属性和方法1.属性(1) length:返回历史记录中的页面数量。
(2) items:返回一个包含所有历史记录页面的数组。
(3) currentItem:返回当前访问的页面在历史记录中的索引。
(4) currentURL:返回当前访问的页面的 URL。
2.方法(1) back():后退到历史记录中的上一页。
(2) forward():前进到历史记录中的下一页。
(3) go():根据参数(页码或 URL)跳转到指定页面。
(4) pushState(url, title):将当前页面添加到历史记录,并设置相应的标题。
(5) replaceState(url, title):替换历史记录中的当前页面,并设置相应的标题。
四、使用 history 对象的实例下面是一个简单的使用 history 对象的实例,实现页面跳转功能:```javascriptfunction goToPage(pageNum) {window.history.go(pageNum);}```在 HTML 中,我们可以为按钮添加点击事件,如:```html<button onclick="goToPage(2)">跳转到第二页</button>```用户点击按钮后,页面将跳转到历史记录中的第二页。
history.js使用方法
history.js使用方法History.js是一个轻量级的JavaScript库,用于在浏览器中实现HTML5 History API。
通过使用History.js,您可以在不使用hash符号(#)的情况下在浏览器地址栏中显示平滑的URL切换。
这使得您的网站看起来更现代,更易于使用,并提高用户体验。
在这篇文章中,我们将介绍如何使用History.js库来实现网页浏览器历史记录功能。
1. 安装和引入History.js首先,您需要安装History.js库。
您可以使用NPM(Node Package Manager)或CDN来安装它。
以下是两种安装方法:方法1:使用NPM安装```bashnpm install history.js```方法2:使用CDN引入```html<script src="https://cdnjs.cloudflare com/ajax/libs/history.js/2.2.0/history.min.js"></script>```在引入History.js库之后,您需要创建一个HTML文件并设置基本的HTML 结构。
在HTML文件中,您需要引入JavaScript文件,并在其中初始化History.js。
2. 初始化History.js在JavaScript文件中,首先需要导入History对象。
然后,创建一个新的History对象实例并使用`pushState`方法来更改浏览器地址栏。
例如:```javascriptimport {HashLocation, History} from 'history';const location = new HashLocation('#/home');const history = new History(location);```在这里,我们使用`HashLocation`对象来处理浏览器地址栏中的哈希值。
JS中Location使用详解
JS中Location使⽤详解javascript中location地址对象描述的是某⼀个窗⼝对象所打开的地址。
要表⽰当前窗⼝的地址,只需要使⽤“location”就⾏了;若要表⽰某⼀个窗⼝的地址,就使⽤“<窗⼝对象>.location”。
⼀、JS中Location的含义1、Location 对象存储在 Window 对象的 Location 属性中,表⽰那个窗⼝中当前显⽰的⽂档的 Web 地址。
它的 href 属性存放的是⽂档的完整 URL,其他属性则分别描述了 URL 的各个部分。
这些属性与 Anchor 对象(或 Area 对象)的 URL 属性⾮常相似。
当⼀个 Location 对象被转换成字符串,href 属性的值被返回。
这意味着你可以使⽤表达式 location 来替代location.href。
2、Anchor 对象表⽰的是⽂档中的超链接,Location 对象表⽰的却是浏览器当前显⽰的⽂档的 URL(或位置)。
但是Location 对象所能做的远远不⽌这些,它还能控制浏览器显⽰的⽂档的位置。
如果把⼀个含有 URL 的字符串赋予 Location 对象或它的 href 属性,浏览器就会把新的 URL 所指的⽂档装载进来,并显⽰出来。
3、除了设置 location 或 location.href ⽤完整的 URL 替换当前的 URL 之外,还可以修改部分 URL,只需要给 Location 对象的其他属性赋值即可。
这样做就会创建新的 URL,其中的⼀部分与原来的 URL 不同,浏览器会将它装载并显⽰出来。
例如,假设设置了Location对象的 hash 属性,那么浏览器就会转移到当前⽂档中的⼀个指定的位置。
同样,如果设置了 search 属性,那么浏览器就会重新装载附加了新的查询字符串的 URL。
4、除了 URL 属性外,Location 对象的 reload() ⽅法可以重新装载当前⽂档,replace()可以装载⼀个新⽂档⽽⽆须为它创建⼀个新的历史记录,也就是说,在浏览器的历史列表中,新⽂档将替换当前⽂档。
JavaScript阻止浏览器返回按钮的方法
JavaScript阻止浏览器返回按钮的方法1. 使用history.pushState(方法这个方法可以修改浏览器的历史记录,可以使用它添加一个新的历史记录条目,从而阻止浏览器返回按钮的功能。
例如:````javascripthistory.pushState(null, null, location.href);window.onpopstate = function(event)history.go(1);};```2. 使用window.onbeforeunload事件当用户尝试关闭当前窗口或导航到其他页面时,可以使用window.onbeforeunload事件来触发一个确认对话框,从而阻止用户离开当前页面。
例如:````javascriptwindow.onbeforeunload = functioreturn "确定离开吗?";};```3. 使用window.addEventListener(和window.event.preventDefault(方法可以使用addEventListener(方法来监听浏览器的popstate事件,并使用event.preventDefault(方法来阻止浏览器返回按钮的默认行为。
例如:````javascriptwindow.addEventListener("popstate", function(event)event.preventDefault(;history.go(1);});```4. 使用window.location.replace(方法可以使用window.location.replace(方法将当前页面替换为一个新的页面,从而阻止用户通过浏览器返回按钮返回到之前的页面。
例如:````javascriptwindow.location.replace("新页面的URL");```5. 使用window.history.forward(方法可以使用window.history.forward(方法将浏览器前进到下一个历史记录条目,从而阻止用户通过浏览器返回按钮返回到之前的页面。
详解JavaScript实现监听路由变化
详解JavaScript实现监听路由变化⽬录historypushState()⽅法pushState()使⽤场景replaceState() ⽅法popstate事件pushState和replaceState如何监听呢?获取当前状态对⽐总结前端实现路由变化主要有两种⽅式,这两种⽅式最⼤特点就是实现URL切换⽆刷新功能1. 通过hash改变,利⽤window.onhashchange 监听。
2. 通过history的改变,进⾏js操作加载页⾯,然⽽history并不像hash那样简单,因为history的改变,除了浏览器的⼏个前进后退(使⽤ history.back(), history.forward()和 history.go() ⽅法来完成在⽤户历史记录中向后和向前的跳转。
)等操作会主动触发popstate 事件,pushState,replaceState 并不会触发popstate事件。
history主要来了解⼀下HistorypushState()⽅法需要三个参数: ⼀个状态对象, ⼀个标题 (⽬前被忽略), 和 (可选的) ⼀个URL. 让我们来解释下这三个参数详细内容:状态对象(state object) — 状态对象state是⼀个JavaScript对象,通过pushState () 创建新的历史记录条⽬。
⽆论什么时候⽤户导航到新的状态,popstate事件就会被触发,且该事件的state属性包含该历史记录条⽬状态对象的副本。
状态对象可以是能被序列化的任何东西。
原因在于Firefox将状态对象保存在⽤户的磁盘上,以便在⽤户重启浏览器时使⽤,我们规定了状态对象在序列化表⽰后有640k的⼤⼩限制。
如果你给 pushState() ⽅法传了⼀个序列化后⼤于640k的状态对象,该⽅法会抛出异常。
如果你需要更⼤的空间,建议使⽤ sessionStorage 以及 localStorage.标题(title) — Firefox ⽬前忽略这个参数,但未来可能会⽤到。
js location对象方法
JavaScript中的location对象提供了许多与当前URL相关的属性和方法。
下面是一些常见的location对象方法:
1. location.href:获取当前页面的URL地址。
2. location.host:获取当前页面的主机名。
3. location.pathname:获取当前页面的路径部分。
4. location.search:获取当前页面的查询字符串部分。
5. location.hash:获取当前页面的锚点部分。
6. location.reload():重新加载当前页面。
7. location.reload(forceGet):重新加载当前页面,并指定是否强制使用HTTP GET方法。
8. location.replace(url):用指定的URL替换当前页面,并在浏览器历史记录中创建新的记录。
9. location.href = url:将当前页面的URL地址设置为指定的URL。
10. location.hash = hash:将当前页面的锚点部分设置为指定的字符串。
需要注意的是,修改location对象的方法会导致浏览器重新加载页面或跳转到新的页面,因此在使用这些方法时需要谨慎处理。
javascript:history.go(-1)的使用
javascript:history.go(-1)的使⽤1.问题描述在微信项⽬开发中,⽐如常⽤联系⼈的增删改查操作中,⽐如跳⼊常⽤联系⼈管理页⾯,选中⼀个联系⼈修改它,就会跳⼊修改页⾯,修改完成后跳转到常⽤联系⼈管理页⾯,此时如果修改成功跳转采⽤的是页⾯跳转,则⽤户在按了返回键的话就会返回到修改页⾯,这是不正常的。
2.解决在修改完成后不采⽤页⾯跳转的⽅式,⽽是采⽤javascript:history.go(-1),这样返回到了联系⼈管理页⾯后再按返回键会直接跳转到个⼈中⼼ 同样如果中间连续跳了两个页⾯,⽐如修改⼿机号,从个⼈信息-->点击修改⼿机号-->验证⼿机号密码-->修改⼿机号-->跳转回个⼈信息,此时也不应使⽤页⾯跳转的⽅式,⽽是采⽤javascript:history.go(-2),这样修改完⼿机号后返回到个⼈信息,如果⽤户再按返回键会直接跳转到个⼈中⼼,⽽不是修改⼿机号页⾯。
3.代码⽰例修改常⽤联系⼈部分ajax请求$.ajax({url:'${request.contextPath}/wx/contacts/editSubmit.html',data:{"id":id,"username":username,"typename":typename,"certificateNo":certificateNo},type:'post',dataType:'json',success:function(data){if(data.code==0){layer.msg(data.message,{icon: 1,time:LAYUIConstant.TIP_TIME});/* setTimeout(function () {location.href="${request.contextPath}/wx/contacts/touristMange.html";}, 1500); */location.href="javascript:history.go(-1)"; //修改成功直接返回到常⽤联系⼈管理页⾯}else{layer.msg(data.message,{icon: 5,time:layUIConstant.TIP_TIME});}},error:function(data){layer.msg(data.message,{icon: 5,time:LAYUIConstant.TIP_TIME});}});修改⼿机号部分代码function butSubmit(){var mobile = $("#mobile").val();if($.trim(mobile)==""){layer.msg("请输⼊⼿机号!",{icon:5,time:JTDUIConstant.TIP_TIME});$("#mobile").focus();return;}var smscode = $("#smscode").val();if($.trim(smscode)==""){layer.msg("请输⼊验证码!",{icon:5,time:JTDUIConstant.TIP_TIME});$("#smscode").focus();return;}$.ajax({url : '${request.contextPath}/wx/personalManagement/modifyMobile.html',type : 'post',data: {"smscode":smscode,"mobile":mobile},dataType:"json",success : function(data) {if (data.code == 0) {layer.msg(data.message,{icon:1,time:LAYUIConstant.TIP_TIME});location.href="javascript:history.go(-2)";} else {layer.msg(data.message,{icon:5,time:LAYUIConstant.TIP_TIME});return;}},error:function(data) {layer.msg(data.message,{icon:5,time:LAYUIConstant.TIP_TIME});}});}。
javascript之location.href、跨窗口调用函数
javascript之location.href、跨窗⼝调⽤函数 location.href这个东西常常⽤于跳转,location既是window对象的属性,⼜是document对象的属性。
JavaScript hash 属性 -- 返回URL中#符号后⾯的内容JavaScript host 属性 -- 返回域名JavaScript hostname 属性 -- 返回主域名JavaScript href 属性 -- 返回当前⽂档的完整URL或设置当前⽂档的URLJavaScript pathname 属性 -- 返回URL中域名后的部分JavaScript port 属性 -- 返回URL中的端⼝JavaScript protocol 属性 -- 返回URL中的协议JavaScript search 属性 -- 返回URL中的查询字符串JavaScript assign() 函数 -- 设置当前⽂档的URLJavaScript replace() 函数 -- 设置当前⽂档的URL,并在history对象的地址列表中删除这个URLJavaScript reload() 函数 -- 重新载⼊当前⽂档JavaScript toString() 函数 -- 返回location对象href属性当前的值有⼏种不同的调⽤⽅法,弄到⾃⼰有点乱,这次⼀次性写个实例,完完全全不再混淆。
本次⽤3个页⾯解决问题: 3.html 本窗⼝:<html><head><title>js</title><script type="text/javascript" src="jquery-1.6.2.min.js"></script><script type="text/javascript">$(function(){$("#parent").click(function(){parent.location.href = "/"; //⽗亲Iframe被跳转})$("#top").click(function(){top.location.href = "/"; //爷爷Iframe(最外层)被跳转})$("#self").click(function(){self.location.href = "/"; //⾃⼰跳转})$("#parentparent").click(function(){parent.parent.location.href = "/"; //爷爷IFrame跳转,可以获取到任意层级的⽗窗⼝})})function ParentRun(){alert("⼉⼦IFrame⽅法!");}</script></head><body>我是⼉⼦!<input type="button" id="parent" value="parent.location.href"/><input type="button" id="top" value="top.location.href"/><input type="button" id="self" value="self.location.href"/><input type="button" id="parentparent" value="parentparent.location.href"/></body></html> 2.html ⽗窗⼝:<html><head><title>js??</title><script type="text/javascript" src="jquery-1.6.2.min.js"></script><script type="text/javascript">$(function(){$("#Outermost").click(function(){//判断当前IFrame是否是最外层页⾯if (top.location == self.location) {alert("本Iframe是最外层框架");}else{alert("本Iframe不是最外层框架"); //这个被弹出}})$("#Son").click(function(){//window.frames[0].location = "/";window.frames["Son"].location = "/";})$("#SonFunction").click(function(){window.frames["Son"].ParentRun(); //IE⽀持,google发布后)⽀持(⽂件系统中不⽀持) })$("#ParentFunction").click(function(){parent.SonRun(); //IE⽀持,google发布后⽀持(⽂件系统中不⽀持)})})</script></head><body>我是⽗亲!<iframe src="3.html" name="Son" style="width:300px; height:300px;"></iframe><input type="button" id="Outermost" value="判断当前IFrame是否最外层"/><input type="button" id="Son" value="控制⼉⼦IFrame跳转"/><input type="button" id="SonFunction" value="调⽤⼦窗⼝函数"><input type="button" id="ParentFunction" value="调⽤⽗窗⼝函数"></body></html> 1.html 爷窗⼝:<html><head><title>js</title><script type="text/javascript" src="jquery-1.6.2.min.js"></script><script type="text/javascript">$(function(){alert(window.location == document.location); //输出 true})function SonRun(){alert("爷爷IFrame⽅法!");}//http://localhost:666/1.html?id=1&name=%E5%BC%A0%E4%B8%89#menudocument.write(location.hash + "<br/>"); // #menudocument.write(location.host + "<br/>"); // localhost:666document.write(location.hostname + "<br/>"); // localhostdocument.write(location.pathname + "<br/>"); // /1.htmldocument.write(location.port + "<br/>"); // 666document.write(location.protocol + "<br/>"); // http:document.write(location.search + "<br/>"); // ?id=1&name=%E5%BC%A0%E4%B8%89 document.write(location.assign + "<br/>"); // function () { [native code] }</script></head><body>我是最爷爷(最外层)!<iframe src="2.html" style="width:500px; height:500px;"></iframe></body></html> 三个页⾯放在同⼀个⽬录,随便点下就知道怎么回事了! jQuery对IFrame的操作主要是通过 $("iframe").contents().find("#id1"); 进⾏跨IFrame操作。
javascript强制刷新页面的实现代码
javascript强制刷新页⾯的实现代码Javascript刷新页⾯的⼏种⽅法:1 history.go(0)2 location.reload()3 location=location4 location.assign(location)5 document.execCommand('Refresh')6 window.navigate(location)7 location.replace(location)8 document.URL=location.href⾃动刷新页⾯的⽅法:1.页⾯⾃动刷新:把如下代码加⼊<head>区域中<meta http-equiv="refresh" content="20">其中20指每隔20秒刷新⼀次页⾯.2.页⾯⾃动跳转:把如下代码加⼊<head>区域中<meta http-equiv="refresh" content="20;url=https://">其中20指隔20秒后跳转到https://页⾯3.页⾯⾃动刷新js版复制代码代码如下:<script language="JavaScript">function myrefresh(){window.location.reload();}setTimeout('myrefresh()',1000); //指定1秒刷新⼀次</script>如何输出刷新⽗窗⼝脚本语句1. this.response.write("<script>opener.location.reload();</script>");2. this.response.write("<script>opener.window.location.href = opener.window.location.href;</script>");3. Response.Write("<script language=javascript>opener.window.navigate(''你要刷新的页.asp'');</script>") JS刷新框架的脚本语句//如何刷新包含该框架的页⾯⽤<script language=JavaScript>parent.location.reload();</script>//⼦窗⼝刷新⽗窗⼝<script language=JavaScript>self.opener.location.reload();</script>( 或 <a href="javascript:opener.location.reload()">刷新</a> )//如何刷新另⼀个框架的页⾯⽤<script language=JavaScript>parent.另⼀FrameID.location.reload();</script>如果想关闭窗⼝时刷新或者想开窗时刷新的话,在<body>中调⽤以下语句即可。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
javascript之location,history用法一、Location对象的使用简介location对象:location提供了关于当前打开窗口或者特定框架的url信息。
一个多框架的窗口对象在location属性显示的是父窗口的URL,每个框架也有一个与之相伴的location对象。
hash属性:hash标注是一个url很好的习惯用法,它指定浏览器到一个位于文档中的anchor 位置,相当于一个书签儿。
host属性:描述渔歌url的主机名和端口,只有端口号是url的一个明确部分时,值中才包括端口号。
hostname属性:一个典型的url的主机名是网络上服务器的名字,该网络存储有你的浏览器上可以查看的文档。
对大多数Web站点来说,服务器名不仅包括域名,也包括www前缀,如果端口号是在url中特有的话,主机名并不包括,而是包括在host属性中。
href属性:该属性提供一个指定窗口对象的整个url的字符串。
pathname属性:url的路径名部分由与服务器root(根)卷相关的目录结构组成。
根不是目录的一部分,如果url的路径是通向根目录中的一个文件,那么location.pathname属性就是(/)。
port属性:端口号很少用到。
当指向一个没有赋给域名的的站点的url中,可以用location.port 属性获取该值,如果从一个url获取值并想用那个组建创建一个url,一定要包括服务器IP 地址和段口号,IP地址和段口号之间用(:)分界。
protocol属性:包括协议名,且后面紧跟着(:)分节目。
assign方法:assign("url")通过这个方法可以实现把一个新的url赋给location对象。
当然你也可以采用直接赋值的方法来实现,或者location.href来导航到一个新的网页。
采用assign的方法会使代码易维护。
reload方法:这个方法可以把浏览器可能保存在内存中的元素(在一段记录中)的文档设置全部忽略掉,重新打开该文档,和浏览器上的刷新可不一样。
它的效果好像是你选择了file 菜单open file一样。
当然如果你不想这样,不想这么做,有一个和这个方法比较类似的方法,就是history.go()方法。
replace方法:当用户从当前网页,跳转到别的网页,有时候是不是想让不能用后退按钮(Back)看到前一个网页,告诉你一个方法,就是采用location.replace("url")就可以实现这个功能。
二、History对象的使用简介javascript 的history对象history.back() 等同于按浏览器的后退按钮history.forward() 等同于按浏览器的前进按钮history.current 指当前的url(等同于location.href),在历史中的索引位置总为0history.go(-2)或history.go("任意.html") 向前或向后移动,或查找字符串标明的最新url三、Window.Open详解1、基本语法:Js代码window.open(pageURL,name,parameters)window.open(pageURL,name,parameters)其中:pageURL 为子窗口路径name 为子窗口句柄parameters 为窗口参数(各参数用逗号分隔) 2、示例:Js代码<!--window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbar s=no, resizable=no,location=no, status=no')//写成一行--><!--window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbar s=no, resizable=no,location=no, status=no')//写成一行-->脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。
请对照。
上例中涉及的为常用的几个参数,除此以外还有很多其他参数,请见3。
2、各项参数其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。
参数| 取值范围| 说明alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上depended | yes/no | 是否和父窗口同时关闭directories | yes/no | Nav2和3的目录栏是否可见height | pixel value | 窗口高度hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键innerHeight | pixel value | 窗口中文档的像素高度innerWidth | pixel value | 窗口中文档的像素宽度location | yes/no | 位置栏是否可见menubar | yes/no | 菜单栏是否可见outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度resizable | yes/no | 窗口大小是否可调整screenX | pixel value | 窗口距屏幕左边界的像素长度screenY | pixel value | 窗口距屏幕上边界的像素长度scrollbars | yes/no | 窗口是否可有滚动栏titlebar | yes/no | 窗口题目栏是否可见toolbar | yes/no | 窗口工具栏是否可见Width | pixel value | 窗口的像素宽度z-look | yes/no | 窗口被激活后是否浮在其它窗口之上=====================================================【1、最基本的弹出窗口代码】Js代码<!--window.open ('page.html')--><!--window.open ('page.html')-->因为着是一段javascripts代码,所以它们应该放在标签和之间。
是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。
要养成这个好习惯啊。
Window.open ('page.html') 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(.. /)均可。
用单引号和双引号都可以,只是不要混用。
这一段代码可以加入HTML的任意位置,和之间可以,间也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。
【2、经过设置后的弹出窗口】下面再说一说弹出窗口的设置。
只要再往上面的代码中加一点东西就可以了。
我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。
Js代码<!--window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')//写成一行--><!--window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')//写成一行-->参数解释:js脚本开始;window.open 弹出新窗口的命令;'page.html' 弹出窗口的文件名;'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替;height=100 窗口高度;width=400 窗口宽度;top=0 窗口距离屏幕上方的象素值;left=0 窗口距离屏幕左侧的象素值;toolbar=no 是否显示工具栏,yes为显示;menubar,scrollbars 表示菜单栏和滚动栏。
Resizable=no 是否允许改变窗口大小,yes为允许;location=no 是否显示地址栏,yes为允许;status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;js脚本结束【3、用函数控制弹出窗口】下面是一个完整的代码。
Js代码<!--function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")//写成一行}//--><!--function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")//写成一行}//-->…任意的页面内容…这里定义了一个函数openwin(),函数内容就是打开一个窗口。