专业编程基础技术教程

网站首页 > 基础教程 正文

07,html弹窗,及窗口间通信和location

ccvgpt 2024-07-20 11:53:24 基础教程 10 ℃

(1),弹窗及参数说明

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <style type="text/css"></style>
	<link rel="stylesheet" type="text/css" href="#">
	
</head>
<body>
	
	<input type="button" value="打开新窗口" onclick="openNewWin()" />
	
</body>
<script type="text/javascript">

	function openNewWin() {
		
		var openWindow = window.open("newTest.html",
			"弹到新窗口",
			"height=500, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
		
	}
	
	/***
		(00) window.open    弹出新窗口的命令
		(01) newTest.html   弹出窗口的文件名,或请求地址
		(02) 弹出窗口的名字(不是文件名),非必须,可用空''代替
		(03) height=100     窗口高度
		(04) width=400      窗口宽度
		(05) top=0          窗口距离屏幕上方的像素值
		(06) left=0         窗口距离屏幕左侧的像素值
		(07) toolbar=no     是否显示工具栏,yes为显示
		(08) menubar        表示菜单栏
		(09) scrollbars     表示滚动栏
		(10) resizable=no   是否允许改变窗口大小,yes为允许
		(11) location=no    是否显示地址栏,yes为允许
		(12) status=no      是否显示状态栏内的信息(通常是文件已经打开),yes为允许
	***/
	
</script>
</html>

(2),弹窗并居中

07,html弹窗,及窗口间通信和location

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <style type="text/css"></style>
	<link rel="stylesheet" type="text/css" href="#">
	
</head>
<body>
	
	<input type="button" value="弹出的窗口居中" onclick="testOpenCenterWindow()" />
	
</body>
<script type="text/javascript">

	function testOpenCenterWindow() {
		
		// 窗口垂直位置水平位置
		var iTop = (window.screen.availHeight - 30 - 500) / 2;
		var iLeft = (window.screen.availWidth - 10 - 800) / 2; //减width
		var openWindow = window.open("newTest.html"
			,"测试弹窗口并居中"
			,"height=500, width=800, top="+ iTop
			+", left="+ iLeft
			+", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no"
				);
	}
	
</script>
</html>

(3),窗口 location属性

window对象location属性是引用Location对象,它表示该窗口显示文档的URL
window.location.href="page1.jsp";  //当前窗口显示指定页面
window.close();                                 //关闭本页面

(4),窗口与父窗口通信

(1) 使用window.open()创建的窗口与父窗口通信
  可以在子窗口页面中通过window.opener来获取父窗口对象,获取之后子窗口便可以对父窗口执行刷新,传值等操作。
window.opener.location.reload();     //子窗口刷新父窗口
window.opener.location.href            //获取父窗口href
//设置父窗口元素值
window.opener.document.getElementById("loginname").value="return1" ;

Tags:

最近发表
标签列表