首先,我们需要了解 window.open() 这个函数,它能打开一个新的浏览器窗口或选项卡并返回新窗口的引用。它可以传递一些参数,如新窗口的 URL、名称、大小等等。
首先,我们需要了解 window.open() 这个函数,它能打开一个新的浏览器窗口或选项卡并返回新窗口的引用。它可以传递一些参数,如新窗口的 URL、名称、大小等等。
如果我们想在原来的窗口中打开一个新的窗口,可以使用以下代码:
window.open("http://www.example.com", "_self");
这个代码中的第二个参数表示在当前窗口(即原窗口)中打开新的 URL,而不是新开一个窗口或标签页。
接下来,我们将使用两个示例来说明这个方法的用法。
示例一:
假设有一个按钮,我们希望在用户点击按钮后弹出一个新的页面,但这个页面显示的是当前网站的其他内容。可以使用以下代码:
document.querySelector('button').addEventListener('click', function() {
window.open('/other-page.html', '_self');
});
这个代码会在用户点击按钮后,把当前页面的 URL 替换为 '/other-page.html'。
示例二:
我们可以使用同样的方法在 HTML 链接中打开新的页面,如下所示:
<a href="/other-page.html" target="_self">Link to other page</a>
这个链接将在用户点击链接后,把当前页面的 URL 替换为 '/other-page.html'。
需要注意的是,如果我们直接使用 window.location.href = '/other-page.html' 来更改 URL,这会刷新整个页面,而使用 window.open() 则可以避免页面刷新并且在当前窗口或标签页中打开新的页面。
本文标题为:javascript中window.open在原来的窗口中打开新的窗口(不同名)
- Ajax实现动态加载数据 2023-02-01
- vue项目上安装SCSS 2023-10-08
- HTML5 新增标签(一) 2023-10-26
- vue3+webpack项目搭建 2023-10-08
- Vue3 从入门到实战 进阶式掌握完整知识体系 2023-10-08
- 如何使用CSS3画出一个叮当猫 2022-11-13
- HTML/HTML5 基础知识 | 面试题专用 2023-10-27
- jQuery Ajax的readyState和status的区别和使用详解 2023-01-31
- vue轮播图插件和页面滚动显示图片插件汇总 2023-10-08
- vue引入html2canvas插件实现图片嵌入div展示下载 2023-10-08