gitcat

2018-12-01 · 1718 次阅读

window.location.href 和 window.open 的几种用法和区别

window.location.href

使用 js 的同学一定知道 js 的 location.href 的作用是什么，但是在 js 中关于 location.href 的用法究竟有哪几种，究竟有哪些区别，估计很多人都不知道了。

location.href 常见的几种形式

目前在开发中经常要用到的几种形式有:

self.location.href; // 当前页面打开URL页面
window.location.href;// 当前页面打开URL页面
this.location.href; // 当前页面打开URL页面
location.href; // 当前页面打开URL页面
parent.location.href; // 在父页面打开新页面
top.location.href; // 在顶层页面打开新页面

经常见到的大概有以上几种形式。

注：

如果页面中自定义了 frame，那么可将 parent、self、top 换为自定义 frame 的名称,效果是在 frame 窗口打开 url 地址。
此外，window.location.href = window.location.href; 和 window.location.Reload(); 都是刷新当前页面。区别在于是否有提交数据。当有提交数据时，window.location.Reload() 会提示是否提交，window.location.href=window.location.href; 则是向指定的 url 提交数据.
用 window.open() 打开新页面，但是用 window.location.href＝"" 却是在原窗口打开的。有时浏览器会一些安全设置 window.open 肯定被屏蔽。例如避免弹出广告窗口。

location.href 不同形式之间的区别

那么，这几种形式的跳转究竟有什么区别呢？

直接讲定义，你肯定不会理解透彻，下面我来贴四个 html 代码，用实际的例子讲解。

a.html：

<form id="form1" action="">
    <div>
        <strong>这是a.html页面<strong>
        <iframe src="b.html" width="500px" height="300px"></iframe>
        </strong></strong>
    </div>
</form>

b.html：

<span>这是b.html</span><span id="span1"></span><br />
<iframe src="c.html" width="500px" height="300px"></iframe>

c.html：

<span><strong>这是c.html：<strong></span><span id="span1"></span><br />
<iframe src="d.html" width="500px" height="300px"></iframe>

d.html：

<span>这是d.html：</span><span id="span1"></span><br />
<input type='button' onclick='jump();' value='跳转'>
<iframe src="d.html" width="500px" height="300px"></iframe>

a.html, b.html，c.html，d.html 通过 iframe 给联系到了一起，那么它们有什么的联系呢？

观察代码，我们可以看出:

a.html 里面嵌着 b.html;
b.html 里面嵌着 c.html;
c.html 里面嵌着 d.html

运行 a.html，贴图一如下：

下面来测试上述几种写法。

在 d.html 里面 head 部分写 js：

function jump()
{
    // 经测试：window.location.href 与 location.href,self.location.href, location.href
    // 都是本页面跳转，作用一样
    window.location.href="http://www.baidu.com";
    // location.href="http://www.baidu.com";
    // self.location.href="http://www.baidu.com";
    // this.location.href="http://www.baidu.com";
    // location.href="http://www.baidu.com";
}

再次运行 a.html，点击那个"跳转" 按钮，运行结果贴图二如下：

对比图一和图二的变化，你会发现 d.html 部分已经跳转到了百度的首页，而其它地方没有发生变化。这也就解释了"本页跳转"是什么意思。

好，再来修改 d.html 里面的 js 部分为：

function jump()
{
    parent.location.href='http://www.baidu.com';
}

运行 a.html 后，再次点击"跳转" 按钮，运行结果贴图三如下：

对比图一和图三，你会发现 a.html 中嵌套的 c.html 部分已经跳转到了百度首页。

分析：我点击的是 a.html 中嵌套的 d.html 部分的跳转按钮，结果是 a.html 中嵌套的 c.html 部分跳转到了百度首页，这就解释了 "parent.location.href 是上一层页面跳转" 的意思。

再次修改 d.html 里面的 js 部分为：

function jump()
{
    top.location.href='http://www.baidu.com';
}

运行 a.html 后，再次点击"跳转" 按钮，

你会发现，a.html 已经跳转到了百度首页。

分析：我点击的是 a.html 中嵌套的 d.html 部分的跳转按钮，结果是 a.html 中跳转到了百度首页，这就解释了 "top.location.href 是最外层的页面跳转" 的意思。

location.href 总结

看完上面的讲解之后，在来看看下面的定义你就会非常明白了：

top.location.href 是最外层的页面跳转
window.location.href、location.href 是本页面跳转
parent.location.href 是上一层页面跳转.

location 是 window 对象的属性，而所有的网页下的对象都是属于 window 作用域链中（这是顶级作用域），所以使用时是可以省略 window。而 top 是指向顶级窗口对象，parent 是指向父级窗口对象。

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

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

属性和方法

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

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

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

window.open

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

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

如

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

和

<input type=button onclick="self.frames['aa'].location.href='1.htm'">

的效果一样。

窗口

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

window.open 用来打开新窗口
window.location 用来替换当前页，也就是重新定位当前页

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

<input type="button" value="新窗口打开" onclick="window.open('http://www.google.com')">
<input type="button" value="当前页打开" onclick="window.location='http://www.google.com/'">

target

window.location 或 window.open 如何指定 target？

这是一个经常遇到的问题，特别是在用 frame 框架的时候，解决办法:

window.location 改为 top.location 即可在顶部链接到指定页，或 window.open("网址", "_top");。

页面和对象

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。

站点作用域

window.open 是可以在一个网站上打开另外的一个网站的地址的，而 window.location 是只能在一个网站中打开本网站的网页。