架构师

您现在的位置是:首页 > 程序人生 > 前端别闹

前端别闹

window.opener和window.open的使用

架构师小跟班 2019-08-30前端别闹
window.opener:是指调用window.open方法的窗口,返回的是创建当前窗口的那个窗口的引用,比如点击了a.htm上的一个链接而打开了b.htm,然后我们打算在b.htm上输入一个值然后赋予a.h


window.opener:

是指调用window.open方法的窗口,返回的是创建当前窗口的那个窗口的引用,比如点击了a.htm上的一个链接而打开了b.htm,然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中,就可以写为:window.opener.document.getElementById("name").value = "输入的数据";在工作中主要是用来解决部分提交的。

如果你在主窗口打开了一个页面,并且希望主窗口刷新就用这个,打开页面的window.opener就相当于主窗口的window。主窗口的刷新你可以用window.opener.location.reload();如果你用虚拟的目录:如struts的*.do会提示你重试你可以改成这样 window.opener.yourformname.submit()就好了。

window.open:

在应用中有这样一个情况,在A窗口中打开B窗口,在B窗口中操作完以后关闭B窗口,同时自动刷新A窗口。

最基本的弹出窗口代码:

window.open('page.html');

经过设置后的弹出窗口:

//该句写成一行代码

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') 

参数解释:

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为允许;

--------------------------------------------------------------------------------

windows.location.href="/url"

当前页面打开URL页面;

window.location.href=window.location.href;和window.location.Reload()都是刷新当前页面。区别在于是否有提交数据。当有提交数据时,window.location.Reload()会提示是否提交,window.location.href=window.location.href;则是向指定的url提交数据

--------------------------------------------------------------------------------

js中没有字符类型,只有字符串类型。

尝试一下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>架构师小跟班 www.jiagou1216.com</title>
<script>
function openWin(){
	myWindow=window.open('','','width=200,height=100');
	myWindow.document.write("<p>这是我的窗口</p>");
	myWindow.focus();
	myWindow.opener.document.write("<p>这个是源窗口!</p>");
}
</script>
</head>
<body>

<input type="button" value="打开我的窗口" onclick="openWin()" />

</body>
</html>


文章评论