window.open 打开新窗口带有原来地址怎么处理

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了window.open 打开新窗口带有原来地址怎么处理相关的知识,希望对你有一定的参考价值。

1、window.open()支持环境:
JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+

2、基本语法:
window.open(pageURL,name,parameters)
其中:
pageURL 为子窗口路径
name 为子窗口句柄
parameters 为窗口参数(各参数用逗号分隔)

3、示例

<SCRIPT>
<!--
window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
//写成一行
-->
</SCRIPT>

 脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。

4、各项参数
  其中yes/no也可使用1/0;pixel value为具体的数值,单位象素

参数 | 取值范围 | 说明

alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
depended | 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 | 窗口的像素宽度
z-look | yes/no | 窗口被激活后是否浮在其它窗口之上

5、多种示例
1)最基本的弹出窗口代码

<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html')
-->
</SCRIPT>

2)经过设置后的弹出窗口

<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
//写成一行
-->
</SCRIPT>

参数解释:
<SCRIPT LANGUAGE="javascript"> js脚本开始;
window.open 弹出新窗口的命令;
'page.html' 弹出窗口的文件名;
'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替;
height=100 窗口高度;
width=400 窗口宽度;
top=0 窗口距离屏幕上方的象素值;
left=0 窗口距离屏幕左侧的象素值;
toolbar=no 是否显示工具栏,yes为显示;
menubar,scrollbars 表示菜单栏和滚动栏。
Resizable=no 是否允许改变窗口大小,yes为允许;
location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;
</SCRIPT> js脚本结束

3)用函数控制弹出窗口

<html>
<head>
<script LANGUAGE="JavaScript">
<!--
function openwin() window.open ("page.html", "newwindow", "height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行

//-->
</script>
</head>
<body onload="openwin()">
…任意的页面内容…
</body>
</html>

这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。
调用方法:
方法一:<body onload="openwin()"> 浏览器读页面时弹出窗口;
方法二:<body onunload="openwin()"> 浏览器离开页面时弹出窗口;
方法三:用一个连接调用:
<a href="#" onclick="openwin()">打开一个窗口</a>
注意:使用的"#"是虚连接。
方法四:用一个按钮调用:
<input type="button" onclick="openwin()" value="打开窗口">

4)同时弹出2个窗口

<script LANGUAGE="JavaScript">
<!--
function openwin()
window.open ("page.html", "newwindow", "height=100, width=100, top=0,left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行

//-->
</script>

5)主窗口打开文件1.htm,同时弹出小窗口page.html

<script language="javascript">
<!--
function openwin()
window.open("page.html","","width=200,height=200")

//-->
</script>

  加入<body>区:
<a href="1.htm" onclick="openwin()">open</a>即可。

6)弹出的窗口之定时关闭控制

<script language="JavaScript">
function closeit()
setTimeout("self.close()",10000) //毫秒
</script>

然后,再用<body onload="closeit()"> 这一句话代替page.html中原有的<BODY>这一句就可以了。

7)在弹出窗口中加上一个关闭按钮

<FORM>
<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>
</FORM>
参考技术A 地址加上 http:// 试试

JS打开新窗口(window.open() href)

JS打开新窗口

常用于文件、图片预览,或者加载一个新页面。

window.open() - 打开新窗口

用法:

window.open(strUrl, strWindowName, [strWindowFeatures]);
  • strUrl: 新窗口需要载入的url地址,项目中我们打开的是一个在线文档。
  • strWindowName:新窗口的名字,通过这个名字我们可以获得新窗口的引用,容易重复,如果我们希望每次打开新窗口都是一个全新的窗口,可以设置成关键字 “_blank”。
  • strWindowFeatures:新窗口的一些设置,比如是否显示菜单栏,是否可以滚动和缩放窗口大小等。

示例:

window.open("https://www.baidu.com", "_blank", "resizable,scrollbars,status");

window.location - 更新当前窗口

加载给定URL的内容资源到这个Location对象所关联的对象上。

属性:

window.location.href = strUrl; // 

方法:

window.location.assign(strUrl);
window.location.replace(strUrl); // 不会保存到浏览器会话的历史 History

a 标签 href 属性

<a href="strUrl" target="_blank">点击打开新窗口预览</a>

动态 a 标签

<div onclick="openNewWindow()">点击打开新窗口预览</div>
function openNewWindow() 
	const strUrl = "https://www.baidu.com";
	let a = document.createElement("a");
	document.body.appendChild(a);
	a.style = "display: none";
	a.target = "_blank";
	a.href = strUrl;
	a.click();
	document.body.removeChild(a);

iOS window.open 无效

可以采用 window.locationa 标签 的方式解决。

或者调整脚本时序,先创建一个空窗口,再加载内容,而不是 window.open(strUrl) 同时完成。

var windowReference = window.open();

myService.getUrl().then(function(url) 
     windowReference.location = url;
);

安全问题

打开新窗口,可以通过 window.opener 获取原窗口的引用,利用这个引用,可以修改原窗口的属性,比如 url,所以解决安全问题就需要把这个引用切断。

window.open 的方式,如下处理

const newWindow = window.open("https://www.baidu.com");
newWindow.opener = null;

a 标签 的方式需要添加 rel 属性:

<a href="strUrl" target="_blank" rel="noopener noreferrer">
    点击打开新窗口预览
</a>

性能问题

除了安全隐患外,还有可能造成性能问题。通过target="_blank"打开的新窗口,跟原来的页面窗口共用一个进程。如果这个新页面执行了一大堆性能不好的 JavaScript 代码,占用了大量系统资源,那你原来的页面也会受到池鱼之殃。

.END

以上是关于window.open 打开新窗口带有原来地址怎么处理的主要内容,如果未能解决你的问题,请参考以下文章

关于js的window.open()

怎么用js跳转带有URL参数的页面

js 用window.open(参数) 打开新窗口,在新窗口怎么获取传过来的参数

chrome window.close 无法使用怎么办

如何用JS打开新窗口,并关闭原来窗口

用js window.open在新窗口中打开链接,关于设置URL地址设置为变量的问题