location.href&&window.open

Posted 2023-04-05 前端 贾公子

目录

location对象的定义和用法。

常用的几种方法。

window.open

参数

  返回值

document.write

Window.focus

实例

---

location对象的定义和用法。

href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 url。语法就是  location.href。

常用的几种方法。

在开发中用的比较多的几种形式，

• ① top.location.href="url"（在顶部页面打开url）
• ② self.location.href="url"（仅在本页面打开url）
• ③ window.location.href="url"（在当前页面打开url）
• ④ parent.location.href="url"（在父窗口打开url）
• ⑤ location.href="url"（在当前页面打开url）

window.open

window.open常用来在新的window或新的tab页打开一个页面或文件（如图片、PDF等），它支持三个参数：

window.open([url],[窗口名称],[参数字符串])；

参数

url

可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口

窗口名称

第二个参数是打开方式设置

• _blank - URL加载到一个新的窗口。这是默认 （空白窗口）
• _parent - URL加载到父框架（父窗口）
• _self - URL替换当前页面（当前窗口）
• _top - URL替换任何可加载的框架集 （顶级窗口）
• 窗口名称：Url允许传入空值。此时第二个参数必须传入一个已打开的窗口的名字，从而获取这个窗口的引用：这样就可以在不打开新窗口的情况下获得窗口名为'baidu'的窗口的引用。

// 打开一个窗口
let win = window.open('https://www.baidu.com', 'baidu');

// 通过窗口名获取上述窗口
let refWin = window.open('', 'baidu');

窗口参数描述，

window.open()方法第三个参数主要用于设置窗口的属性，例如，以固定的宽度和高度窗口打开链接，

channelmode=yes|no|1|0	是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes|no|1|0	是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes|no|1|0	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels	窗口的高度。最小.值为100
left=pixels	该窗口的左侧位置
location=yes|no|1|0	是否显示地址字段.默认值是yes
menubar=yes|no|1|0	是否显示菜单栏.默认值是yes
resizable=yes|no|1|0	是否可调整窗口大小.默认值是yes
scrollbars=yes|no|1|0	是否显示滚动条.默认值是yes
status=yes|no|1|0	是否要添加一个状态栏.默认值是yes
titlebar=yes|no|1|0	是否显示标题栏.被忽略，除非调用html应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes|no|1|0	是否显示浏览器工具栏.默认值是yes
top=pixels	窗口顶部的位置.仅限IE浏览器
width=pixels	窗口的宽度.最小.值为100

  返回值

window.open返回的是对新打开的窗口的引用，即该窗口的window对象：不过这里引用到的window对象并不具备完整的DOM属性和方法，它仅仅提供了访问该页面的一些基本属性和方法，

• blur()，手动移除窗口焦点的方法，refWin.blur()可使该窗口失去焦点。
• close()，关闭该窗口的方法。
• closed，标识该窗口是否已经被关闭。
• frames，新窗口内的frames。
• length，新窗口内iframes的数量。
• location，新窗口window的location对象，用于访问窗口的地址信息。
• opener，该窗口的打开者。如我们在a页面通过window.open打开b页面，那么b页面的window.opener就是a页面的window。
• parent，该窗口的父窗口，由于是顶级窗口，因此它的值等于window自身。
• postMessage，通信接口，通过该方法可以实现向新窗口发送消息，优势是支持跨域。
• self、window、top，前两个均代指当前window，top指的是当前窗口所在页面的顶级窗口，由于自身已经是顶级窗口，因此top也是当前window。
   

document.write

document.write是javascript中对document.open所开启的文档流(document stream操作的API方法，它能够直接在文档流中写入字符串，一旦文档流已经关闭，那document.write就会重新利用document.open打开新的文档流并写入，此时原来的文档流会被清空，已渲染好的页面就会被清除，浏览器将重新构建DOM并渲染新的页面。

• 语法：document.write()
• 参数：字符串，可以传多个字符串参数
• 返回值：undefined

Window.focus

Window.focus()的作用是让页面成为当前窗体 ,focus对象可以让已经最小化的窗口重新获得焦点，从而弹出原页面window.focus();，

实例

在新浏览器窗口中打开 www.runoob.com ：

function open_win() 
    window.open("https://www.runoob.com");

下面的示例在一个新的浏览器打开一个 window 空白页：

function openWin()
    myWindow=window.open('','','width=200,height=100');
    myWindow.document.write("<p>这是'我的窗口'</p>");
    myWindow.focus();

js中top.location.hrefparent.location.href用法

window.location.href、location.href是本页面跳转

parent.location.href是上一层页面跳转

top.location.href是最外层的页面跳转

举例说明：

window.location.href、location.href：

例:

代码如下	复制代码
window.location.href= ‘wapsend1.asp?zimu=A&rev= ‘   +   form1.rev.value ;

parent.location.href：C页面跳转

例:

代码如下	复制代码
window.parent.parent.location.href=“你定义要跳转的页面”

top.location.href：A页面跳转

例:

在form提交表单的时候有个属性可能对上面的(2)的情况有用target=_top

代码如下	复制代码
<form name=loginForm action=Login.action method=post target=_top> </form>

例2

代码如下	复制代码
echo <iframe width=0 height=0 frameborder=0 scrolling=auto src=‘登录论坛‘ onload=‘reurl()‘></iframe>; echo <script> function reurl(){top.location.href=‘.$url.‘}</script>;

也可以直接在表单提交是的target加个即可

<form>: form提交后D页面跳转

<form target=_blank>: form提交后弹出新页面

<form target=_parent>: form提交后C页面跳转

--------------------- 本文来自 z18842589113 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/z18842589113/article/details/53316287?utm_source=copy