JS如何判断一个页面是否已经打开?

本文介绍了一种页面刷新后仍然保持打开状态的技术,并提供了一个更完美的解决方案,包括使用iframe和窗口操作来实现页面在刷新后仍能保持不变。
部署运行你感兴趣的模型镜像

一种是刷新之后又会重新打开页面:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
      <script type="text/javascript">
        var objWin;
        function openPage() {
            var target = "http://www.baidu.com";
              //判断是否打开
            if (objWin == null || objWin.closed) {
                objWin = window.open(target);
            } else {
                objWin.location.replace(target);
            }
            //objWin.focus();
        }     
</script>
</head>
<body> 
    <a href="javascript:openPage();">打开页面</a>
  
</body>
</html>
一种更完美一点的方案(刷新之后也不会再重新打开):
index.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<input type="button" value="open" onclick="window.open('proxy.html','tag')">
</body>
</html>


proxy.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>target页面</title>
    <script>
        if(window.parent.name!="msg")
        {
            window.location.href="target.html";//这才是你的显示页面
        }
        else
        {
            window.parent.focus();
        }
    </script>
</head>
<body>
proxy
</body>
</html>

target.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<h3>target页面</h3>
<script>
    window.name="msg";
</script>
message page
<iframe src="" name="tag" style="display:none"></iframe>
</body>
</html>





您可能感兴趣的与本文相关的镜像

Python3.10

Python3.10

Conda
Python

Python 是一种高级、解释型、通用的编程语言,以其简洁易读的语法而闻名,适用于广泛的应用,包括Web开发、数据分析、人工智能和自动化脚本

在 Vue 开发中使用 `window.open()` 方法打开新窗口时,若需要判断相同链接是否已经打开,可以通过以下几种方式实现: ### 1. 利用 `window.open()` 的返回值判断窗口是否打开 `window.open()` 方法会返回一个 `window` 对象,若目标链接已经打开且名称相同,则会返回该已打开窗口的引用。通过检查返回值是否具有有效属性(如 `closed`)可以判断窗口是否已存在。 ```javascript const existingWindow = window.open('https://example.com', 'uniqueWindowName'); if (!existingWindow || existingWindow.closed) { // 窗口未打开或已关闭 console.log('窗口未打开或已关闭'); } else { // 窗口已打开 console.log('窗口已存在'); } ``` ### 2. 自定义窗口管理逻辑 由于浏览器的安全限制,跨域窗口的访问权限有限,因此可以使用一个全局变量来记录已打开的链接或窗口名称,避免重复打开。 ```javascript const openedWindows = {}; function openUniqueWindow(url, windowName) { if (openedWindows[windowName] && !openedWindows[windowName].closed) { // 窗口已存在,聚焦到该窗口 openedWindows[windowName].focus(); return; } // 打开新窗口并记录 const newWindow = window.open(url, windowName); if (newWindow) { openedWindows[windowName] = newWindow; } } // 调用方法 openUniqueWindow('/XXXX/XXXX', 'uniqueWindowName'); ``` ### 3. 结合 Vue 的路由系统生成完整路径 当项目使用 Vue Router 的 `history` 模式时,确保路径拼接正确,可以结合 `this.$router.resolve()` 方法生成完整的 URL。 ```javascript handleOpenWindow() { const resolvedUrl = this.$router.resolve({ path: '/XXXX/XXXX' }); const existingWindow = window.open(resolvedUrl.href, 'uniqueWindowName'); if (!existingWindow || existingWindow.closed) { console.log('窗口未打开或已关闭'); } else { console.log('窗口已存在'); } } ``` ### 4. 处理跨域限制 如果新窗口与当前页面不同源,则受同源策略限制,无法直接访问窗口对象的属性(如 `closed`)。此时只能通过记录窗口名称或 URL 的方式管理,无法精确判断是否打开。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值