让window.open()打开页面位于最上面

最新推荐文章于 2024-05-26 17:11:42 发布

几多心跳

最新推荐文章于 2024-05-26 17:11:42 发布

阅读量3.7k

点赞数 2

分类专栏： HTML 文章标签： window.open html

本文链接：https://blog.csdn.net/LFP528136199/article/details/84375762

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、概述：

先说下我的需求，我需要用window.open()方式来打开一个嵌入网络监控摄像头的新页面，并且要实现当未关闭弹出页面时无法操作父窗口。这也是为了提升用户体验，避免嵌入摄像头的页面藏在其他页面下方，用户还得去寻找。

二、实现

用window.open()打开新页面非常简单，几行代码就搞定，新页面中可以嵌入自己开发的页面，可以通过网址来嵌入在线网页，废话不多说，在此直接用菜鸟教程在线编辑器来实现效果（http://www.runoob.com/try/try.php?filename=try_win_focus ，JQuery环境已配好，直接上代码即可）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<input type="button" value="打开窗口" onclick="openWin()" />
<script>
	function openWin(){
		myWindow=window.open('','','width=400,height=300');
		myWindow.document.write("<p>这是'我的窗口'</p>");
                myWindow.focus();

		//window.onfocus = function (){myWindow.focus();};
		 window.onclick = function (){myWindow.focus();};
		
	}
</script>
</body>
</html>

通过以上方法，打开新页面后，当其父页面获得焦点时，重新让其子页面获得焦点。这样就实现弹出窗口一直活跃在最上面。

另外，window.open()方法打开新页面时，还有很多参数，可以根据需求自行设置：

z-look | yes/no | 窗口被激活后是否浮在其它窗口之上
depended | yes/no | 是否和父窗口同时关闭 
alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 
directories | yes/no | Nav2和3的目录栏是否可见 
height | pixel value | 窗口高度 
hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键 
innerHeight | pixel value | 窗口中文档的像素高度 
innerWidth | pixel value | 窗口中文档的像素宽度 
location | yes/no | 位置栏是否可见 
menubar | yes/no | 菜单栏是否可见 
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度 
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度 
resizable | yes/no | 窗口大小是否可调整 
screenX | pixel value | 窗口距屏幕左边界的像素长度 
screenY | pixel value | 窗口距屏幕上边界的像素长度 
scrollbars | yes/no | 窗口是否可有滚动栏 
titlebar | yes/no | 窗口题目栏是否可见 
toolbar | yes/no | 窗口工具栏是否可见 
Width | pixel value | 窗口的像素宽度

ps:

我完成上述工作后去改了项目代码，却发现IE浏览器不支持这种做法（在此吐槽八百遍......），后来又在本地测试，发现，只要 window.onclick = function (){childWindow.focus();};这一行代码在我本地测试没问题，但在虚拟桌面中却不行，不知道是浏览器版本问题还是什么原因，就这样吧。

几多心跳

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
让window.open()打开页面位于最上面

一、概述：先说下我的需求，我需要用window.open()方式来打开一个嵌入网络监控摄像头的新页面，并且要实现当未关闭弹出页面时无法操作父窗口。这也是为了提升用户体验，避免嵌入摄像头的页面藏在其他页面下方，用户还得去寻找。二、实现用window.open()打开新页面非常简单，几行代码就搞定，新页面中可以嵌入自己开发的页面，可以通过网址来嵌入在线网...
复制链接

扫一扫

专栏目录