js调用父窗口函数-iframe父窗口和子窗口相互的调用方法
Iframe父页面与子页面之间的调用
Iframe⽗页⾯与⼦页⾯之间的调⽤专业词语解释如下：Iframe：iframe元素是⽂档中的⽂档。
window对象: 浏览器会在其打开⼀个HTML⽂档时创建⼀个对应的window对象。
但是，如果⼀个⽂档定义了⼀个或者多个框架(即：包含⼀个或者多个frame或者iframe标签)，浏览器就会为原始⽂档创建⼀个window对象，再为每个iframe创建额外的window对象，这些额外的window对象是原始窗⼝的⼦窗⼝。
contentWindow: 是指指定的iframe或者iframe所在的window对象。
如果想要学习 "iframe之间的通信问题及iframe⾼度⾃适应"，请看这边⽂章：⽗页⾯与⼦页⾯之间的调⽤。
现在我们可以慢慢做demo来分别讲解下，假如有iframe⽗页⾯为 iframe1.html, ⽗页⾯上有2个⼦页⾯分别为iframe2.html 和 iframe3.html。
⽗页⾯iframe1.html代码如下：<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="jquery1.7.js"></script></head><body><iframe src="http://localhost/iframe/iframe3.html" id = "iframe3"></iframe><iframe src="http://localhost/iframe/iframe2.html" id = "iframe2"></iframe><div class="iframe1">⽗页⾯</div><script>function test2() {console.log(1);}</script></body></html>⼦页⾯iframe2.html代码如下：<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="jquery1.7.js"></script></head><body><div id="test">aaa</div><div class="iframe2">⼦页⾯</div><script>function b() {console.log("我是⼦页⾯");}function iframe3Page() {console.log("iframe3页⾯调⽤iframe2页⾯");}</script></body></html>1. ⼦页⾯iframe2.html调⽤⽗页⾯ iframe1.html的元素如下代码：console.log($('.iframe1',parent.document));2. ⼦页⾯iframe2.html调⽤⽗页⾯iframe1.html的函数如下代码：parent.test2();注意：⽗页⾯iframe1.html页⾯中test2⽅法不能放在$(function(){}), 放在⾥⾯就调⽤不到。
js调用iframe里的方法
JS调用iframe里的方法在前端开发中，我们经常会使用iframe（内联框架）来嵌入其他网页或者内容。
而有时候，我们需要在父页面中调用iframe中的方法来实现一些交互功能。
本文将详细介绍如何使用JavaScript来调用iframe里的方法。
什么是iframe？首先，让我们来了解一下什么是iframe。
iframe是HTML中的一个元素，用于在一个网页中嵌入另一个网页。
它可以实现网页之间的互相调用和通信。
通过使用<iframe>标签，我们可以在父页面中插入一个子页面，并且可以通过JavaScript来操作和控制子页面。
在父页面中调用iframe里的方法要在父页面中调用iframe里的方法，我们需要以下几个步骤：1.获取到对应的iframe元素2.使用contentWindow属性获取到子页面窗口对象3.使用窗口对象来调用子页面内部的方法下面是一个示例代码：// 获取到对应的iframe元素const iframe = document.getElementById('myIframe');// 使用contentWindow属性获取到子页面窗口对象const iframeWindow = iframe.contentWindow;// 调用子页面内部的方法iframeWindow.myMethod();首先，我们通过getElementById函数获取了id为”myIframe”的iframe元素。
然后，通过访问contentWindow属性，我们得到了子页面的窗口对象。
最后，我们可以使用窗口对象来调用子页面内部的方法。
需要注意的是，调用iframe内部方法时，必须保证iframe和父页面在同一个域名下。
否则，由于浏览器的同源策略限制，将无法进行跨域访问。
在iframe中定义可调用的方法上述示例代码中使用了myMethod()来调用子页面中的方法。
那么，在子页面中我们应该如何定义这个可调用的方法呢？在子页面中，我们需要将要暴露给父页面调用的方法定义在全局作用域下。
利用JS对iframe父子（内外）页面进行操作的方法教程
利⽤JS对iframe⽗⼦（内外）页⾯进⾏操作的⽅法教程本⽂主要给⼤家介绍了关于利⽤JS对iframe⽗⼦（内外）页⾯进⾏操作的⽅法，分享出来供⼤家参考学习，下⾯来⼀起看看详细的介绍：⼀、获取iframe⾥的内容在开始之前，⾸先我们来看看如何获取iframe⾥的内容，获取iframe中内容主要的两个API就是contentWindow,和contentDocument iframe.contentWindow, 获取iframe的window对象iframe.contentDocument, 获取iframe的document对象这两个API只是DOM节点提供的⽅式(即getELement系列对象)var iframe = document.getElementById("iframe1");var iwindow = iframe.contentWindow;var idoc = iwindow.document;console.log("window",iwindow);//获取iframe的window对象console.log("document",idoc); //获取iframe的documentconsole.log("html",idoc.documentElement);//获取iframe的htmlconsole.log("head",idoc.head); //获取headconsole.log("body",idoc.body); //获取body实际情况如:另外更简单的⽅式是，结合Name属性，通过window提供的frames获取.<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes"><p>Your browser does not support iframes.</p></iframe><script type="text/javascript">console.log(window.frames['ifr1'].window);console.dir(document.getElementById("ifr1").contentWindow);</script>其实window.frames[‘ifr1']返回的就是window对象，即window.frames['ifr1']===window这⾥就看你想⽤哪⼀种⽅式获取window对象，两者都⾏，不过本⼈更倾向于第⼆种使⽤frames[xxx].因为，字母少啊喂~ 然后，你就可以操控iframe⾥⾯的DOM内容。
js里父页面与子页面的相互调用
js里父页面与子页面的相互调用一、在页面里用 open 打开的子页面：1、子页面调用父页面的方法,包括子页面给父页面传值：window.opener.methodName();window.opener.methodName(param1,param2);2、父页面关闭子页面：在父页面openWin=window.open("");function bClick(){openWin.close();}二、在Iframe 的子页面里子页面给父页面的Div赋值parent.window.document.getElementByIdx_x('id').innerHTM L='';调用父页面的方法window.parent.window.methodName();刷新父页面window.parent.location.reload();open 打开的属性window.open(pageURL,name,parameters)其中：pageURL 为子窗口路径name 为子窗口句柄parameters 为窗口参数(各参数用逗号分隔)参数 | 取值范围 | 说明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 | 窗口被激活后是否浮在其它窗口之上。
iframe 在父页面调用子页面的JS方法_6
父页面：parent.html代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>parent</title><script>function parentFunction() {alert('function in parent');}function callChild() {child.window.childFunction();/*child 为iframe的name属性值，不能为id，因为在FireFox下id不能获取iframe对象*/}</script></head><body><input type="button" name="call child" value="call child" onclick="callChild()"/><br/><br/><iframe name="child" src="./child.html" ></iframe></body></html>子页面：child.html代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>child</title><script>function childFunction() {alert('function in child');}function callParent() {parent.parentFunction();}</script></head><body><input type="button" name="call parent" value="call parent" onclick="callParent()"/> </body></html>更多信息请查看IT技术专栏。
iframe 子元素调用父元素的方法
iframe 子元素调用父元素的方法在网页开发中，我们经常会使用到 iframe 元素，它可以将另一个网页嵌入到当前页面之中，实现代码和页面的复用，提高网页的性能。
在此基础上，我们还会遇到一种情况，那就是在 iframe 子元素中需要调用父元素中的方法。
这种情况下，我们可以借助JavaScript 提供的一些方法来实现。
1. window.parent 方法我们可以使用 window.parent 来获取当前 iframe 的父窗口，然后再调用父窗口中的方法。
这种方法比较简单，也比较常用，实现起来也非常容易。
代码如下：```javascriptwindow.parent.methodName();```methodName 是父窗口中的方法名称。
需要注意的是，使用此方法时，父窗口和子窗口必须在同一个域名下，否则会出现跨域问题，导致无法调用父窗口中的方法。
2. parent 方法如果父窗口和子窗口在同一个域名下，我们也可以直接使用 parent 方法来调用父窗口中的方法。
代码如下：```javascriptparent.methodName();```methodName 是父窗口中的方法名称。
这种方法与 window.parent 方法类似，只是写法稍有不同。
需要注意的是，如果父窗口和子窗口不在同一个域名下，同样会出现跨域问题。
3. postMessage 方法使用 postMessage 方法可以在不同窗口之间进行通信，包括父窗口和子窗口之间。
这种方法可以实现非常灵活的交互，但是需要一定的代码量来实现。
代码如下：在父窗口中：```javascript// 监听子窗口发送的消息window.addEventListener('message', function(e) {if (e.origin == '子窗口的域名') {// 处理子窗口发送的消息}}, false);// 设置子窗口var iframe = document.getElementById('iframe');var win = iframe.contentWindow;// 发送消息到子窗口win.postMessage('Message from parent', '子窗口的域名');```在子窗口中：```javascript// 监听父窗口发送的消息window.addEventListener('message', function(e) {if (e.origin == '父窗口的域名') {// 处理父窗口发送的消息}}, false);// 发送消息到父窗口window.parent.postMessage('Message from child', '父窗口的域名'); ```postMessage 方法的第一个参数是要传递的消息，第二个参数是接收消息的窗口的域名。
iframe中子父类窗口调用JS的方法及注意事项
iframe中⼦⽗类窗⼝调⽤JS的⽅法及注意事项⼀、前⾔我页⾯⽤的是EasyUI的弹出窗⼝⾥⾯嵌⼊⼀个iframe。
第⼀：⽗窗⼝打开⼦窗⼝是⼀个新增⽤户信息的iframe⼦页⾯，点击保存后，⼦窗⼝iframe则去调⽤⽗窗⼝的function closeAddWindow()⽅法，让⽗窗⼝去关闭新增页⾯；第⼆：⽗窗⼝打开⼀个设置⽤户权限的iframe⼦窗⼝，⾸先打开这个⼦窗⼝会全部加载数据库表中所有的存在的权限，然后⼦窗⼝需要把加载的权限信息拼接html Append到⼀个ID为<table id="tb"> </table>上，这⾥有个问题就是⽗窗⼝打开⼦窗⼝加载所有权限后根本⽆法把html 追加到id="tb"的表格上，这个原因很简单，因为⽗窗⼝调⽤⼦窗⼝加载所有权限信息的后，没有找到表格元素，因为⼦页⾯还没有完全加载完成，这种情况处理在这⾥也介绍了，给iframe注册⼀个onload事件，等加载完成后再去调⽤追加的⽅法。
好了，简单到这⾥，让我们瞧瞧更多的事例吧！！~~~~~~(*^__^*) 嘻嘻……⼆、iframe⼦⽗窗⼝⽅法调⽤2.1语法使⽤1、⽗窗⼝嵌⼊iframe复制代码代码如下:<iframe id='myFrame' name="myFrame" src="FChild.html" width='100%' height='100%' frameborder='0'></iframe>2、⽗窗⼝调⽤⼦窗⼝⽅法复制代码代码如下:myFrame.window.sonMethod();3、⼦窗⼝调⽤⽗窗⼝⽅法复制代码代码如下:parent.fatherMethod();4、兼容浏览器的iframe 加载完成⽅法if (myFrame.attachEvent) {myFrame.attachEvent("onload", function () {alert("兼容IE加载的加载⽅法");});} else {myFrame.onload = function () {alert("兼容其他浏览器加载⽅法");};}2.2语法代码Father.html<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title></head><body><div>我是⽗窗⼝内容</div><div><input type="button" id="btnFather" value="调⽤⼦窗⼝⽅法" /></div><br /><br /><br /><iframe id='myFrame' name="myFrame" src="FChild.html" width='100%' height='100%' frameborder='0'></iframe><script type="text/javascript">document.getElementById("btnFather").onclick=function () {myFrame.window.sonMethod();}function fatherMethod() {alert("⽗窗⼝⽅法!");}if (myFrame.attachEvent) {myFrame.attachEvent("onload", function () {alert("兼容IE加载的加载⽅法");});} else {myFrame.onload = function () {alert("兼容其他浏览器加载⽅法");};}</script></body></html>FChild.html<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title></head><body><div style="border:1px solid red;"> 我是⼦窗体内容</div><div > <input type="button" id="btnSon" value="调⽤⽗窗⼝⽅法" /></div><script type="text/javascript">document.getElementById("btnSon").onclick = function () {parent.fatherMethod();}function sonMethod() {alert("⼦窗⼝⽅法!");}</script></body></html>三、什么情况下使⽤到 myFrame.onload 或者 myFrame.attachEvent这⾥使⽤的是easyui框架前端框架<div id="divRoleUsers" title="设置⽤户⾓⾊" class="easyui-window" closed="true" collapsible="false" minimizable="false" maximizable="false" style="width: 140px; height: 250px; padding: 5px;"></div><div > <input type="button" id="btn" value="设置⽤户⾓⾊" /></div><script type="text/javascript">$("#btn").click(function () {showSetUserRoleWindow();});//设置⽤户⾓⾊function showSetUserRoleWindow() {var getSelections = $("#tt").datagrid("getSelections");if (getSelections.length > 1 || getSelections.length == 0) {$.messager.alert("错误提⽰", "请选中⼀⾏数据!", "error");return false;}var data = getSelections[0]; //获取选中的⼀⾏所有json的数据//if ($("#divRoleUsers #iframe").length != 0) {// $("#divRoleUsers #iframe").remove();//}// $('#divRoleUsers').append("<iframe id='iframe' name='iframe' src='RoleUsers_Update.aspx?UserID=" + erID + "' width='100%' height='100%' frameborder='0'></iframe>");//错误做法！：上⾯src='RoleUsers_Update.aspx?UserID=" + erID + "' 这⾥通过拼接参数iframe的src，//然后通过⼦窗⼝ parent.document.getElementById("iframe").getAttribute("src");//获取⽗窗体iframe的src 发现根据获取不到UserID的值，为null，也是因为加载顺序先后的问题，导致我要⽤给iframe注册onload事件后才能获取到我需要的结果 //if (myframe.attachEvent) {// myframe.attachEvent("onload", function () {// alert("Local iframe is now loaded.");// myframe.window.loadAllRole();// });//} else {// myframe.onload = function () {// alert("Local iframe is now loaded.");// myframe.window.loadAllRole();// };//}if ($("#divRoleUsers #myframe").length != 0) { //这⼀步是必须的，因为不加这⼀句下⾯onload绑定事件只执⾏⼀次，我需要每次加载完iframe都调⽤⼀次⼦窗⼝的⽅法！$("#divRoleUsers #myframe").remove();}$('#divRoleUsers').append("<iframe id='myframe' name='myframe' src='RoleUsers_Update.aspx' width='100%' height='100%' frameborder='0'></iframe>");if (myframe.attachEvent) {myframe.attachEvent("onload", function () {myframe.window.loadAllRole();myframe.window.loadUserRole(erID);});} else {myframe.onload = function () {myframe.window.loadAllRole(); //调⽤⼦窗⼝iframe⾥⾯的⽅法加载所有的⾓⾊checkboxmyframe.window.loadUserRole(erID); //接着传递⽤户ID过去给⼦窗⼝的⽅法，给⽤户拥有的⾓⾊设置checkbox选中};}$('#divRoleUsers').window('open');}</script>四、总结⼏个关键点吧⽗⼦窗⼝⽅法的调⽤，注意加载的先后顺序才能获取到想要的结果，遇到问题常⽤alter()测试或者浏览器的开发者⼯具监控以上内容就是本⽂中介绍iframe中⼦⽗类窗⼝调⽤JS的⽅法及注意事项，希望⼤家喜欢。
JS如何对Iframe内外页面进行操作总结
JS如何对Iframe内外页⾯进⾏操作总结⽬录在iframe外获取iframe⾥的内容⽅式⼀⽅式⼆在iframe内获取iframe外的内容在iframe中调⽤⽗页⾯中定义的⽅法和变量在⽗页⾯操作iframe⼦页⾯的⽅法和变量总结判断iframe加载完成不同域通信在iframe外获取iframe⾥的内容⽅式⼀通过contentWindow和contentDocument这两个API:var iframe = document.getElementById("iframe1");var iwindow = iframe.contentWindow;var idoc = iwindow.document;var idocument = iframe.contentDocument;console.log("window",iwindow);//获取iframe的window对象console.log("document",idoc); //获取iframe的documentconsole.log("html",idoc.documentElement);//获取iframe的html其中iframe.contentWindow可以获取iframe的window对象,iframe.contentDocument可以获取iframe的document对象。
⽅式⼆结合Name属性，通过window提供的frames获取:<iframe src ="/index.html" id="ifr1" name="ifr2" scrolling="yes"><p>Your browser does not support iframes.</p></iframe><script type="text/javascript">console.log(window.frames['ifr2'].window);console.dir(document.getElementById("iframe").contentWindow);</script>在iframe内获取iframe外的内容window.parent 获取上⼀级的window对象，如果还是iframe则是该iframe的window对象window.top 获取最顶级容器的window对象，即，就是你打开页⾯的⽂档在iframe中调⽤⽗页⾯中定义的⽅法和变量window.parent.window.parentMethod();window.parent.window.parentValue;在⽗页⾯操作iframe⼦页⾯的⽅法和变量window.frames["iframe_Name"].window.childMethod();window.frames["iframe_Name"].window.childValue;总结在使⽤Iframe时还需要注意以下两点：1. 要确保在iframe加载完成后再进⾏操作，如果iframe还未加载完成就开始调⽤⾥⾯的⽅法或变量，会产⽣错误；2. 如果iframe所链接的是外部页⾯，因为安全机制不能使⽤同域名下的通信⽅式；判断iframe加载完成iframe.onload = function() {// TODO}不同域通信⽗页⾯向⼦页⾯传递数据利⽤location对象的hash值，通过它传递通信数据。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
js调用父窗口函数-iframe父窗口和子窗口相互的调用方法iframe父窗口和子窗口相互的调用方法解决方案[详细][全]来源:互联网收集分享:QQ1663551688
iframe父窗口和子窗口相互的调用方法集锦一、父窗口调用iframe子窗口方法
1、HTML语法：<iframename="myFrame"src="child.html"></iframe>
2、父窗口调用子窗口：myFrame.window.functionName();
3、子窗品调用父窗口：parent.functionName();
简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行
4、父窗口页面源码：<html>
<head>
<scripttype="text/javascript">
functionsay(){
alert("parent.html------>I'matparent.html");
}
functioncallDhild()
{
//document.frames("myFrame").f1();
myFrame.window.say();
}
</script>
</head>
<body>
<inputtype=buttonvalue="调用child.html中的函数say()"onclick="callDhild()">
<iframename="myFrame"src="child.html"></iframe>
</body>
</html>
5、子窗口页面：<html>
<head>
<scripttype="text/javascript">
functionsay()
{
alert("child.html--->I'matchild.html");
}
functioncallParent(){
parent.say();
}
</script>
</head>
<body>
<inputtype=buttonvalue="调用parent.html中的say()函数"onclick="callParent()">
</body></html>
二、iframe父窗口和子窗口相互的调用方法1、IE中使用方法：父窗口调用子窗口：iframe_ID.iframe_document_object.object_attribute=attribute_value 例子：onDlick="iframe_text.myH1.innerText='";
子窗口调用父窗口：parent.document.getElementById("parent_document_object").object_attri bute=attribute_value
例：parent.document.getElementById("myH1").innerHTML="";
3、完整的例子
test.htm<HTML>
<HEBD>
<TITLE>TestPage</TITLE>
<scriptsrc="prototype-1.4.0.js"></script>
<scriptlanguage="javascript">
functionshow()
{
window.frames["iframe_text"].document.getElementById("myH1").innerHTM L="";
}
</script>
</HEBD>
<BODY>
<iframeheight="350"width="600"src="iframe_test.htm"name="iframe_text" ></iframe>
<formaction=""method="post">
<inputname="haha"id="haha"type="text"maxlength="30"value="haha"/> <br/>
<textareacols="50"rows="5"id="getBttributeMethod"></textarea>
<inputtype="button"onDlick="show();"value="提交"/>
</form>
<h1id="myH1">d</h1>
</BODY></HTML>
frame_test.htm<!DODTYPEhtmlPUBLID"-//W3D//DTDXHTML1.0Transitional//EN "";
}
</script><body>
<h1id="myH1">ha</h1>
<formaction=""method="post">
<inputname="abc"id="abc"type="text"maxlength="30"value="abc"/>
<br/>
<textareacols="50"rows="10"id="text"></textarea>
<br/>
<inputtype="button"value="提交"onclick="show();"/>
</form>
</body></html>
test.htm里面firefox下访问iframe必须用name，不能用id，所以要改为name="iframe_test"。
三、在c#中如何动态改变iframe的src值，动态指向一个网页
1)如果是javascript脚本
给iframe加一个ID如<iframeid=frmList……
在脚本写
frmList.document.location=strNewUrl
2)如果是后台程序
给iframe加一个ID，再加上runat=server如<iframeid=frmListrunat=server……
在程序里写
frmList.Bttributes.Bdd("src",strNewUrl);
functiongetIFrameDOM(id){//兼容IE、Firefox的iframeDOM获取函数returndocument.getElementById(id).contentDocument||document.frame s[id].document;
}。