window.location(window.location.reload用法)

更新时间:2023-03-01 21:11:10 阅读：评论：0

前端必备基础知识：window.location 详解

前端开发人员对 window.location 对象应该不陌生，通过它不但可以获取当前页面的地址信息，还可以修改某些属性，实现页面跳转和刷新等。

我们以一个常见的 URL 为例，看看 window.location 包含哪些属性和方法。

window.location 含义 .origin URL 基础地址，包括协议名、域名和端口号 .protocol 协议 ( http: 或 https: ) .host 域名+端口号 .hostname 域名 .port 端口号 .pathname 路径(以 / 开头) .arch 查询字符串，以 ? 开头 .hash 页面锚点，以 # 开头 .href 完整 URL

比较容易混淆的是 host 和 hostname 这两个属性，区别是前者还包含了端口号。

以上属性除了 origin 是只读属性，其他都可以修改。修改后的效果就是跳转到相应的新地址。

window.location 返回 Location 类型的一个实例对象，包含当前页面的地址信息。可以通过以下几种方式访问：

这几个变量都是等价的，因为它是全局变量。但是建议避免直接用 location 变量，因为很容易跟其他局部变量混淆，造成不必要的麻烦。比如：

推荐用 window.location ，这样一眼就可以看出用的是全局变量。

window.location 动作

.assign() 导航到指定 URL .replace() 导航到指定 URL并删除当前页面的访问记录 .reload() 重新加载当前页面 .toString() 返回 URL 字符串

.toString() 和 .href 都是返回 URL，它们之间有区别吗？结果是一样的，性能上稍微有点差别。通过 JSPerf 上的性能测试结果可以看出， .href 稍快，通过 window.location 拼接字符串的形式速度最慢。

.assign() 和直接修改 href 是等价的，那么它们跟 .replace() 的区别是什么呢？

.assign() 在跳转新地址的同时会留下当前页面的访问记录，点击浏览器返回按钮会回到原来的页面， .replace() 则不会保留。

.assign() 执行流程：

.replace() 执行流程：

这个特性在用 JS 控制页面导航时非常重要，稍不注意会造成意外的的页面回退地址。

window.location是什么意思

window location
窗口位置
例句筛选
1.
Specifying the size and window location at which a column should bedisplayed.
指定某列显示的大小和窗口位置。

2.
You will e the pop-up window Installation Location: ChangeEquipment Position.
就可看到弹出式窗口安装地址：修改设备位置。

用window.location和window.open做链接的区别

window.location和window.open做链接的区别为：性质不同、用途不同、打开网站不同。

一、性质不同

1、window.location：window.location是window对象的属性。

2、window.open：window.open是window对象的方法。

二、用途不同

1、window.location：window.location用来替换当前页，也就是重新定位当前页。

2、window.open：window.open用来让链接页面在窗口中打开。

三、打开网站不同

1、window.location：window.location只能在一个网站中打开本网站的网页。

2、window.open：window.open可以在一个网站上打开另外的一个网站的地址。

window.location和window.location.href的区别

window.location 用来获取网页的URL，它是一个对象，包含属性有：

那么区别就很明显了， window.location 是一个对象， window.location.href 是 window.location 的一个属性

看个例子把：
随意打开一个网站，分别输出其 window.location 和 window.location.href ：

jquery 打开页面window.location和window.open的区别

1.window.location是window对象的属性，而window.open是window对象的方法

window.location是你对当前浏览器窗口的URL地址对象的参考！

window.open是用来打开一个新窗口的函数！

2.window.open不一定是打开一个新窗口

只要有窗口的名称和window.open中第二个参数中的一样就会将这个窗口替换，用这个特性的话可以在iframe和frame中来代替location.href。

如

<input type=button onclick="window.open('1.htm','aa','')">和

<input type=button

onclick="lf.frames['aa'].location.href='1.htm'">的效果一样

3.在给按钮、表格、单元格、下拉列表和DIV等做链接时一般都要用Javascript来完成，和做普通链接一样，可能我们需要让链接页面在当前窗口打开，也可能需要在新窗口打开，这时我们就可以使用下面两项之一来完成：

window.open 用来打开新窗口

window.location 用来替换当前页，也就是重新定位当前页

可以用以下来个实例来测试一下。

4.window.location或window.open如何指定target?这是一个经常遇到的问题，特别是在用frame框架的时候

解决办法:

window.location 改为 top.location　即可在顶部链接到指定页

或

window.open("你的网址","_top");

5.window.open 用来打开新窗口

window.location 用来替换当前页，也就是重新定位当前页

用户不能改变document.location(因为这是当前显示文档的位置)。

window.location本身也是一个对象。

但是,可以用window.location改变当前文档 (用其它文档取代当前文档),而document.location不是对象。

服务器重定向后有可能使document.url变动,但window.location.href指的永远是访问该网页时用的URL.

大多数情况下,document.location和location.href是相同的，但是，当存在服务器重定向时，document.location包含的是已经装载的URL，而location.href包含的则是原始请求的文档的URL.

6.window.open()是可以在一个网站上打开另外的一个网站的地址

而window.location()是只能在一个网站中打开本网站的网页

window.open()详解

<scripttype="text/javascript">
<!--　window.open('page.html');-->
</script>

因为着是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。

要养成这个好习惯啊。

window.open ('page.html') 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以，只是不要混用。这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。

经过设置后的弹出窗口

下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。

<SCRIPTLANGUAGE="javascript">
<!--
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')//这句要写成一行
-->
</SCRIPT>

参数解释：

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为允许；

</SCRIPT>

用函数控制弹出窗口:

下面是一个完整的代码。

<html>
<head>
<scriptLANGUAGE="JavaScript">
<!--
functionopenwin(){
window.open("page.html","newwindow","height=100,width=400,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no")//写成一行
}
//-->
</script>
</head>
<bodyonload="openwin()">
任意的页面内容...
</body>
</html>

这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢？

方法一：<body onload="openwin()"> 浏览器读页面时弹出窗口；

方法二：<body onunload="openwin()"> 浏览器离开页面时弹出窗口；

方法三：用一个连接调用：

<a href="#" onclick="openwin()">打开一个窗口</a>

注意：使用的“#”是虚连接。

方法四：用一个按钮调用：

同时弹出两个窗口

对源代码稍微改动一下：

<scriptLANGUAGE="JavaScript">
<!--
functionopenwin(){
window.open("page.html","newwindow","height=100,width=100,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no")//写成一行
window.open("page2.html","newwindow2","height=100,width=100,top=100,left=100,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no")//写成一行
}
//-->
</script>

为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。

注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。

【主窗口打开文件1.htm，同时弹出小窗口page.html】

如下代码加入主窗口<head>区：

<scriptlanguage="javascript">
<!--
functionopenwin(){
window.open("page.html","","width=200,height=200")
}
//-->
</script>

加入<body>区：

<a href="1.htm" onclick="openwin()">open</a>即可。

【弹出的窗口之定时关闭控制】

下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入page.html的HTML中，可不是主页面中，否则 ...)，让它10秒后自动关闭是不是更酷了？

首先，将如下代码加入page.html文件的<head>区：

<scriptlanguage="JavaScript">
functioncloit()
{
tTimeout("lf.clo()",10000)//毫秒
}
</script>

然后，再用<body onload="cloit()"> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)

【在弹出窗口中加上一个关闭按钮】

<script>
<INPUTTYPE='BUTTON'VALUE='关闭'){
openwin()
document.cookie="popped=yes"
}
}
</script>

然后，用<body onload="loadpopup()">（注意不是openwin而是loadpop啊！）替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。

注意：

1.window.location.Reload()和window.location.href=window.location.href;都是刷新当前页面。lf.location.reload(); //也是刷新本页的意思;

2.用window.open()打开新页面,但是用window.location.href＝"" 却是在原窗口打开的.

有时浏览器会一些安全设置window.open肯定被屏蔽。例如避免弹出广告窗口。

window.location和document.location的区别分析

当我们需要对html网页进行转向的时候或是读取当前网页的时候可以用到下面三个对像：
window.location、document.location、document.URL 对当前网页进行跳转
我们先来看看 document 与 window对象:
[window 对象]
　　它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。
[document 对象]
该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。
document 只是属于window 的一个子对像。
window.location 包含 href 属性，直接取值赋值时相当于 window.location.href。
window.location.href 当前页面完整 URL。
document.location 包含 href 属性，直接取值赋值时相当于 document.location.href。
document.location.href 当前页面完整 URL。
document.href 没有这个属性。
document.URL 取值时等价于 window.location.href 或 document.location.href。在某些浏览器中通过对 document.URL 赋值来实现页面跳转，但某些浏览器中不行。
那么 window.location 和 document.location 有什么区别呢？我认为是没有区别的，我已经在多个浏览器中不同页面（包括 iframe、frame）中测试了。有人说一个可写，一个只读，这一点也在我的测试中被否定了。同样在 MSDN 中说 location 应用于 window 和 document，但并未提出二者有区别。所以我认为二者是没有区别的。
[document对象]

　　该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。
　　属性
　　alinkColor 活动链接的颜色(ALINK)
　　anchor 一个HTMI锚点,使用<A NAME=>标记创建(该属性本身也是一个对象)
　　anchors array 列出文档锚点对象的数组(<A NAME=>)(该属性本身也是一个对象)
　　bgColor 文档的背景颜色(BGCOLOR)
　　cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性
　　fgColor 文档的文本颜色(<BODY>标记里的TEXT特性)
　　form 文档中的一个窗体(<FORM>)(该属性本身也是一个对象)
　　forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)
　　lastModified 文档最后的修改日期
　　linkColor 文档的链接的颜色,即<BODY>标记中的LINK特性(链接到用户没有观察到的文档)
　　link 文档中的一个<A HREF=>标记(该属性本身也是一个对象)
　　links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)
　　location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,
可以改变 window.location (用其它文档取代当前文档)window.location本身也是一个对象,而
document.location不是对象
　　referrer 包含链接的文档的URL,用户单击该链接可到达当前文档
　　title 文档的标题((TITLE>)
　　vlinkColor 指向用户已观察过的文档的链接文本颜色,即<BODY>标记的VLINK特性
　　方法
　　clear 清除指定文档的内容
　　clo 关闭文档流
　　open 打开文档流
　　write 把文本写入文档
　　writeln 把文本写入文档,并以换行符结尾

[window对象]
　　它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。
　　属性
　　defaultStatus 缺省的状态条消息
　　document 当前显示的文档(该属性本身也是一个对象)
　　frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象)
　　frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个
对象)
　　history 窗口的历史列表(该属性本身也是一个对象)
　　length 窗口内的框架数
　　location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location
混淆,后者是当前显示文档的URL。用户可以改变window.location(用另一个文档取代当前文档),但却不能改变
document.location (因为这是当前显示文档的位置)
　　name 窗口打开时,赋予该窗口的名字
　　opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引
入的一个新属性)
　　parent 包含当前框架的窗口的同义词。frame和window对象的一个属性
　　lf 当前窗口或框架的同义词
　　status 状态条中的消息
　　top 包含当前框架的最顶层浏览器窗口的同义词
　　window 当前窗口或框架的同义词,与lf相同
　　方法
　　alert() 打开一个Alert消息框
　　clearTimeout() 用来终止tTimeout方法的工作
　　clo() 关闭窗口
　　confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击
Cancel返回fal
　　blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta 3引入的新方法)
　　focus() 把指定的窗口带到前台(另一个新方法)
　　open() 打开一个新窗口
　　prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本
　　tTimeout() 等待一段指定的毫秒数时间,然后运行指令事件处理程序事件处理程序
　　Onload() 页面载入时触发
　　Onunload() 页面关闭时触发
区别：用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象

本文发布于:2023-02-28 20:27:00，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/zhishi/a/167767627086760.html

本文word下载地址：window.location(window.location.reload用法).doc

本文 PDF 下载地址：window.location(window.location.reload用法).pdf

上一篇：小米账号

下一篇：返回列表

标签：window location reload

留言与评论（共有 0 条评论）