JavaScript子窗口调用父窗口变量和函数的方法
2023-09-27 14:27:16 时间
在做一个父窗口开启子窗口并且在子窗口关闭的时候调用父窗口的方法,达到局部刷新的目的。
父窗口:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns=" http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>parent</title> 6 <script type="text/javascript"> 7 var parentPara='parent'; 8 function parentFunction() { 9 alert(parentPara); 10 } 11 </script> 12 </head> 13 <body> 14 <button onclick="parentFunction()">显示变量值</button> 15 <button onclick="window.open('child.html')">打开新窗口</button> 16 </body> 17 </html>
子窗口:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns=" http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>child</title> 6 <script type="text/javascript"> 7 function modify() { 8 opener.parentPara='child'; 9 } 10 </script> 11 </head> 12 <body> 13 <button onclick="opener.parentFunction()">调用父页面的方法</button> 14 <button onclick="modify()">更改父页面中变量的值</button> 15 </body> 16 </html>
子页面是父页面的一个iframe
父页面:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns=" http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>parent</title> 6 <script type="text/javascript"> 7 function fill() { 8 //alert(frame1.window.childPara); //显示frame1内的变量值 9 var str=document.getElementById('txt1').value; //获得文本框内输入的值 10 frame1.window.div1.innerHTML=str; //将值填入子页面的一个div中 11 } 12 </script> 13 </head> 14 <body> 15 <div style="background-color:yellow;width:300px;height:300px;"> 16 父页面 17 <iframe id="frame1" src="child.html" frameborder="0" scrolling="no" width="120px" height="120px"></iframe> 18 <br/><br/><br/><br/> 19 <input id="txt1" type="text"/> 20 <button onclick="fill()">将文本框内值填充入子界面</button> 21 </div> 22 </body> 23 </html>
子页面:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns=" http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>child</title> 6 <script type="text/javascript"> 7 function fun() { 8 parent.fill(); 9 } 10 </script> 11 </head> 12 <body> 13 <div style="background-color:lightblue;width:100px;height:100px;"> 14 <b>子页面</b><br/> 15 <a href="#" onclick="fun()">同父页面按钮</a> 16 <div id="div1" style="color:red;"> 17 </div> 18 </div> 19 </body> 20 </html>
刷新父页面时,其中的iframe也会随之刷新;刷新iframe时,父页面不会刷新。
另外,如果是在angularJS中的一个模块调用另一个模块的方法:主要思路是获取另一模块的angular和document,然后用angular.element(document.getElementById("aaa"));
其中:var angular = window.opener.angular;var document = window.opener.document;具体情况视实际情况在获取。
相关文章
- 使用Javascript D3创建属于你的涂鸦作品
- js 从数据数组中返回选定的数据元素 JavaScript slice() 方法
- 【学习笔记34】JavaScript的时间对象
- 【JavaScript】JS最简单的二级折叠菜单的实现方法(完整实例)
- 前端基础 - JavaScript方法覆盖
- JavaScript 32. 异步编程
- JavaScript - for 循环使用 splice() 方法删除数组中的元素会被跳过或只删除部分的两种解决方案
- JavaScript - 获取数组最后一个元素(支持一维数组与二维复杂对象数组)多种方法取数组的最后一个元素
- JavaScript浏览器本地储存:localStorage、sessionStorage、cookie
- 【JavaScript】Understanding callback functions in Javascript
- javascript book
- JavaScript 评测代码运行速度的几种方法
- object in javascript
- javascript中数组的map方法
- 《JavaScript框架设计》——2.4 define方法
- 原生JavaScript进阶训练---重写call方法
- 原生JavaScript进阶训练---重写filter方法
- 原生JavaScript进阶训练---重写forEach方法
- JavaScript设计模式之简单工厂
- 《Web前端开发最佳实践》——3.6 添加JavaScript禁用的提示信息
- Javascript Object常用方法总结
- JavaScript 新语法详解:Class 的私有属性与私有方法
- JavaScript 的 4 种数组遍历方法: for VS forEach() VS for/in VS for/of
- JavaScript黑客是这样窃取比特币的,Vue开发者不用担心!
- 10个JavaScript常见BUG及修复方法
- 华为OD机试 - 寻找连续区间(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- JavaScript window.location物
- JavaScript标准对象
- 深入理解JavaScript的闭包特性如何给循环中的对象添加事件
- 3 Ways to Preload Images with CSS, JavaScript, or Ajax---reference
- JavaScript Array数组splice方法的使用
- JavaScript Array数组slice方法的使用
- javascript 中new Date().toLocaleString()在不同浏览器中的结果不一致的解决方法
- javascript的propertyIsEnumerable()方法