【JS随心录】Location.href 属性与 window.open() 方法的用法与区别

最新推荐文章于 2023-11-18 18:53:26 发布

一碗周.

最新推荐文章于 2023-11-18 18:53:26 发布

阅读量373

点赞数

分类专栏： JS随心录文章标签：定位 js javascript window

本文链接：https://blog.csdn.net/weixin_46163658/article/details/113705772

版权

JS随心录专栏收录该内容

20 篇文章 1 订阅

订阅专栏

【JS随笔】Location.href 属性与 window.open() 方法的用法与区别

古之立大事者，不惟有超世之才，亦必有坚韧不拔之志——苏轼

写在前面

使用 JavaScript 的朋友们肯定对 js 的 location.href 和 window.open() 的作用是什么是了解的，但是这两种方法究竟有几种用法，区别是什么估计就没有怎么了解了。

本篇博客就来介绍一下两者的用法与区别。

Location.href 的用法

目前在开发中常用的几种形式如下所示：

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

示例

为了更直观的体现这几个页面有什么不同，我们新建几个页面，来看一下。

a.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>a</title>
  </head>
  <body>
    <h3>a.html</h3>
    <iframe src="b.html" width="800px" height="700px"></iframe>
  </body>
</html>

b.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>b</title>
  </head>
  <body>
    <h3>b.html</h3>
    <iframe src="c.html" width="750px" name="jumpb" height="600px"></iframe>
  </body>
</html>

c.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>c</title>
  </head>
  <body>
    <h3>c.html</h3>
    <iframe src="d.html" width="700px" height="500px"></iframe>
  </body>
</html>

d.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>d</title>
  </head>
  <body>
    <h3>d.html</h3>
    <button id="jump1">本页跳转-self</button>
    <button id="jump2">本页跳转-window</button>
    <button id="jump3">本页跳转-this</button>
    <button id="jump4">本页跳转-</button>
    <button id="jump5">跳转至父级-parent</button>
    <button id="jump6">跳转至顶级-top</button>
  </body>
  <script>
    let btn1 = document.getElementById('jump1')
    let btn2 = document.getElementById('jump2')
    let btn3 = document.getElementById('jump3')
    let btn4 = document.getElementById('jump4')
    let btn5 = document.getElementById('jump5')
    let btn6 = document.getElementById('jump6')

    // 跳转
    btn1.onclick = () => {
      self.location.href = 'https://seecode.cc'
    }
    btn2.onclick = () => {
      self.location.href = 'https://seecode.cc'
    }
    btn3.onclick = () => {
      this.location.href = 'https://seecode.cc'
    }
    btn4.onclick = () => {
      location.href = 'https://seecode.cc'
    }
    btn5.onclick = () => {
      parent.location.href = 'https://seecode.cc'
    }
    btn6.onclick = () => {
      top.location.href = 'https://seecode.cc'
    }
  </script>
</html>

创建了4个 HTML 页面，这四个页面的关系是

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

我们看一下运行效果

在这里插入图片描述

演示完例子就对前面那几行代码的意思就一目了然了。

window.open() 的用法

window.open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

语法结构如下所示：

let windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);

strUrl: 要在新打开的窗口中加载的URL。
strWindowName: 新窗口的名称。

可选的参数如下
- _blank : URL加载到一个新的窗口。这是默认
- _parent : URL加载到父框架
- _self : URL替换当前页面
- _top : URL替换任何可加载的框架集
- name : 窗口名称
strWindowFeatures: 一个可选参数，列出新窗口的特征
- 可选项如下
  
  channelmode : yes|no|1|0 (窗口显示为剧场模式[全屏幕显示当前网页, 包括工具栏等],或频道模式[一般显示]).
  
  directories : yes|no|1|0 (是否添加目录按钮, 比如在IE下可能会有一个"链接"这样的按钮在最上面出现)
  
  fullscreen : yes|no|1|0 (使浏览器处理全屏幕模式, 并隐藏标题栏和菜单等)
  
  menubar : yes|no|1|0 (是否显示浏览器默认的菜单栏)
  
  resizeable : yes|no|1|0 (窗口是否可调整大小)
  
  scrollbars : yes|no|1|0 (是否允许水平或垂直滑动条)
  
  titlebar : yes|no|1|0 (是否添加一个标题栏)
  
  toolbar : yes|no|1|0 (是否添加浏览器默认的工具栏)
  
  status : yes|no|1|0 (是否显示状态栏)
  
  location : yes|no|1|0 (是否显示搜索栏)
  
  copyhistory : yes|no|1|0 (似乎已经废弃, 如果只要工具栏显示, 历史按钮就会显示出来)
  
  height : 窗口的高度, 最小值为100像素
  
  width : 窗口的宽度, 最小值为100像素
  
  left : 窗口的最左边相对于屏幕的距离

示例代码如下

let windowObjectReference;
let strWindowFeatures = `
    menubar=yes,
    location=yes,
    resizable=yes,
    scrollbars=yes,
    status=yes
`;

function openRequestedPopup() {
    windowObjectReference =
    window.open(
        "https://seecode.cc",
        "CNN_WindowName",
        strWindowFeatures
    );
}

Location.href 属性与 window.open() 方法的区别

Location.href 属性与 window.open() 方法的区别如下所示：

Location.href 属性是对当前浏览器窗口的 URL 地址对象的参考；window.open() 方法打开一个新的窗口。
Location.href 属性一般用于页面的迭代，也就是重新定位当前页
window.open() 方法是可以在一个网站上打开另外的一个网站的地址，而 Location.href 属性只能在一个网站中打开本网站的网页

写在最后

虽然 Location.href 属性与 window.open() 方法在开发的时候都可以用来做页面的跳转，但是两者的区别在某些时候还是有必要的区分的。

一碗周.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JS随心录】Location.href 属性与 window.open() 方法的用法与区别

【JS随笔】Location.href 属性与 window.open() 方法的用法与区别古之立大事者，不惟有超世之才，亦必有坚韧不拔之志——苏轼写在前面使用 JavaScript 的朋友们肯定对 js 的 location.href 和 window.open() 的作用是什么是了解的，但是这两种方法究竟有几种用法，区别是什么估计就没有怎么了解了。本篇博客就来介绍一下两者的用法与区别。Location.href 的用法目前在开发中常用的几种形式如下所示：self.location.hr
复制链接

扫一扫