js window对象-子窗口、子窗口调用父页面方法

骑猪看日落 2021-07-24 19:45 766阅读 0赞

**子窗口方法**
    
    	window.open('子页面路径','打开方式','配置')
    		newwindow  子窗口打开
    		toolbar  工具栏
    		menubar 	菜单栏
    		scrollbars	滚动条
    		resizable	大小是否可变
    		location	地址栏
    		status		状态栏
    		
    	**关闭子窗口**
    	window.close();  只能关闭window.open()打开的子页面,必须配套window.open()使用
    	
    **子页面调用父页面函数**
    	window.opener.父页面函数名();   会在父页面执行

代码示例：  
父页面

<html>
    	<head>
    		<title>js window</title>
    		<meta charset="utf-8"/>
    		<script type="text/javascript">
    			function t1()
    			{ 
    				window.open("19.html","newwindow",'height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes');
    			}
    			
    			function t2()
    			{ 
    				alert("我是父页面的函数");
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" value="测试open" onclick="t1()"/>
    	</body>
    </html>

子页面

<html>
    	<head>
    		<title>子页面</title>
    		<meta charset="utf-8"/>
    		<script type="text/javascript">
    			
    			function t1(){ 
    				/*实现倒计时*/
    				window.setInterval(function(){ 
    					var span=document.getElementById("time1");
    					span.innerHTML=span.innerHTML-1
    					/*关闭页面*/
    					if(span.innerHTML==0){ 
    					window.close();
    				}
    				},1000)
    				
    			}
    			function t3()
    			{ 
    				window.opener.t2();
    			}
    		
    		</script>
    	</head>
    	<body onload="t1()">
    		<hr />
    		radio
    		关闭页面<span id="time1"style="color:red; font-size: 20px;">5</span>
    		<input type="button" value="test子页面调用函数" onclick="t3()" />
    	</body>
    </html>