window.open()简析

最新推荐文章于 2024-05-23 21:48:28 发布

huzhenv5

最新推荐文章于 2024-05-23 21:48:28 发布

阅读量597

点赞数

分类专栏： JavaScript 文章标签： js window.open 用法

本文链接：https://blog.csdn.net/huzhenv5/article/details/104875507

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

文章目录

定义
语法
用法

定义

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

语法

window.open(URL, name, specs, replace)

具体语法可以参考：Window open() 方法

用法

1，关闭当前页面打开新的页面

使用window.open()，代码如下：

<body>
    <div id="openNew">关闭当前页面打开新页面</div>
</body>
<script type="text/javascript">
    openNew.onclick = function(){
        window.open('https://www.baidu.com', '_self')
    }
</script>

效果为当前的浏览器窗口页面挑战到了百度搜索页面

其它方法
除了使用window.open()之外，还有其它的方法可以实现相同的效果

使用<a>标签：

<a href="https://blog.csdn.net/huzhenv5">Welcome</a>

使用window.location.href：

<body>
    <div id="openNew">welcome</div>
</body>
<script type="text/javascript">
    openNew.onclick = function(){
        window.location.href = 'https://blog.csdn.net/huzhenv5'
    }
</script>

2，保留当前页面打开新的浏览器tab页

使用window.open()，代码如下：

<body>
    <div id="openNew">openTab</div>
</body>
<script type="text/javascript">
    openNew.onclick = function(){
        window.open('https://www.baidu.com', '_blank');   
    }
</script>

其它方法

通过<a>标签实现：

<a href="https://blog.csdn.net/huzhenv5" target="_blank">Welcome</a>

3，保留当前页面打开新的html窗口

使用window.open()，代码如下：

<body>
    <div id=openNew>open new html window</div>
</body>
<script type="text/javascript">
    openNew.onclick = function(){
        window.open('https://www.baidu.com', '_blank', 'left=100, top=100, width=400, height=300, location=no, menubar=no, status=no, titlebar=no, toolbar=no');   
    }
</script>

注意：
window.open方法打开小窗口，越来越多的浏览器处于安全考虑，无法设置隐藏地址栏。如果要实现隐藏地址栏的功能，需要通过一些UI框架的模态框实现

4，控制父页面跳转到其它页面

父页面：

<div id=openNew>
    这是父页面
    <iframe id="subwindow" src="sub.html"></iframe>
</div>

子页面，sub.html：

<body>
    <div>我是子页面</div>
    <div id="paOpenNew">父页面跳转</div>
</body>
<script type="text/javascript">
    paOpenNew.onclick = function() {
    	// 也可通过parent.location.href实现
        // parent.location.href = 'https://www.baidu.com'
        window.open('https://www.baidu.com', '_parent')
    }
</script>

5，控制顶级页面跳转到其它页面

顶层页面：

<div id=openNew>
    这是顶级页面
    <iframe id="subwindow" src="next.html"></iframe>
</div>

下级页面，next.html：

<div id=openNew>
     这是下级页面
     <iframe id="subwindow" src="sub.html"></iframe>
 </div>

底层页面，sub.html：

<body>
    <div>我是底层页面</div>
    <div id="paOpenNew">顶级页面跳转</div>
</body>
<script type="text/javascript">
    paOpenNew.onclick = function() {
        // 也可以通过top.location.href实现
        // top.location.href = 'https://www.baidu.com'
        window.open('https://www.baidu.com', '_top')
    }
</script>

huzhenv5

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
window.open()简析

文章目录定义语法用法1，关闭当前页面打开新的页面2，保留当前页面打开新的浏览器tab页3，保留当前页面打开新的html窗口4，控制父页面跳转到其它页面5，控制顶级页面跳转到其它页面定义window.open()方法用于打开一个新的浏览器窗口或者查找一个已命名的窗口语法window.open(URL, name, specs, replace)具体语法可以参考：Window open()...
复制链接

扫一扫