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值，通过它传递通信数据。

子窗口调用父窗口js方法

子窗口调用父窗口js方法
在子窗口中调用父窗口的JavaScript 方法，可以通过`window.opener` 对象来实现。

在父窗口中定义一个JavaScript 方法，然后在子窗口中使用
`window.opener.methodName()` 的方式调用。

例如，如果父窗口中定义了一个名为`parentMethod` 的方法，可以按照以下步骤进行调用：
1. 在子窗口中使用`window.opener.parentMethod()` 调用该方法。

2. 确保子窗口是通过`window.open()` 方法打开的，并且父窗口在打开子窗口时是同一个域。

3. 子窗口中的JavaScript 代码可以通过`window.opener` 对象来访问父窗
口的全局变量、方法或对象。

注意：这种方法只适用于在同一个浏览器窗口中打开的子窗口调用父窗口的方法。

如果是在不同域或不同浏览器窗口之间进行跨窗口通信，可以使用其他技术，如跨文档消息（postMessage）等。

下面是一个简单的示例：
在父窗口中的HTML 页面中定义一个JavaScript 方法：
javascript
function parentMethod() {
console.log("This is the parent method");
}
在子窗口中调用父窗口的JavaScript 方法：
javascript
window.opener.parentMethod();
注意：请确保在适当的时机调用父窗口的方法，例如在按钮点击事件等与用户交互相关的操作中。

父页面调用iframe的方法

父页面调用iframe的方法父页面调用iframe的方法是通过JavaScript来实现的。

在父页面中可以使用DOM（文档对象模型）来访问和操作iframe中的内容。

首先，我们需要在父页面中获取iframe的引用。

可以使用以下两种方法之一：1. 使用iframe的id属性来获取引用：javascriptvar iframe = document.getElementById('iframeId');这里的'iframeId'是iframe元素的id属性值。

2. 使用iframe的name属性来获取引用：javascriptvar iframe = window.frames['iframeName'];这里的'iframeName'是iframe元素的name属性值。

获取到iframe的引用后，就可以调用它的方法或访问它的属性。

调用iframe中的方法：可以通过获取iframe的引用来调用其内部方法。

例如，如果iframe中存在一个名为"myFunction"的方法，可以使用以下代码来调用它：javascriptiframe.contentWindow.myFunction();这里的"contentWindow"属性用于获取iframe的窗口对象，然后可以通过该窗口对象来调用iframe中的方法。

访问iframe中的属性：如果iframe中存在一些属性，我们可以通过获取iframe的引用来访问它们。

例如，如果iframe中存在一个名为"myVar"的属性，可以使用以下代码来访问它：javascriptvar value = iframe.contentWindow.myVar;这里的变量"value"将包含iframe中"myVar"属性的值。

js和vue方法的相互调用（iframe父子页面的方法相互调用）。

js和vue⽅法的相互调⽤（iframe⽗⼦页⾯的⽅法相互调⽤）。

项⽬是前后端不分离的，模板引擎使⽤的JSP。

但是使⽤了Vue+ElementUI，这⾥列举⼀些常⽤的调⽤⽅式，有时候可能。

在js⾥调⽤vue⽅法我们需要把⽅法注册到vue对象之外的页⾯，所以对与在methods中定义的⽅法，需要在mounted中注册给window。

之后我们可以在js⾥直接调⽤，在vue⾥调⽤js⽅法直接使⽤window.⽅法名就可以调⽤在主页⾯中调⽤iframe⼦页⾯的代码：<script type="text/javascript">//调⽤⼦页⾯的⽅法.var childWindow = $("#addFrame")[0].contentWindow; //表⽰获取了嵌⼊在iframe中的⼦页⾯的window对象。

[]将JQuery对象转成DOM对象，⽤DOM对象的contentWindow获取⼦页⾯window对象。

childWindow.subFunction(); //调⽤⼦页⾯中的subFunction⽅法。

</script><script type="text/javascript">//⼦页⾯调⽤⽗页⾯中的⽅法。

window.parent.parentFunction(); //parentFunction是⽗页⾯中⾃定义的JS⽅法。

</script>在iframe⼦页⾯（vue环境⼀样）中调⽤⽗页⾯代码：⼦页⾯：主页⾯：在⼀个iframe⼦页⾯调⽤另⼀个iframe⼦页⾯的⽅法，并且同为Vue环境主页⾯：⼦页⾯1，调⽤的⼀⽅：⼦页⾯2，被调⽤的⼀⽅，需要注册：。

js子窗口调用父窗口函数并传递对象给父窗口的方法

</div> </form> </body> </html>
--子窗口
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Child.aspx.cs" Inherits="Child" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
alert();//获取对象属性。 }
function shuaxinb() {
window.location.href=window.location.href; } </script> </head> <body> <form id="form1" runat="server"> <div> 父窗口<br /> <br /> <input type="text" id="ddddd" style="width: 323px"/><br /> <input type="button" id="Button1" value="刷新1" onclick="javascript:shuaxinb();" /> <input type="button" id="d" value="打开1" onclick="javascript:OpenWin();" />

父窗口和子窗口 JS 之间的方法调用

父窗口和子窗口之间方法调用js 2011-09-04 23:39:39|分类：javascript |标签：|字号大中小订阅.弹出窗口两种方式：1.window.showModalDialog：var feature =dialogWidth:615px;dialogHeight:505px;status:no;help:no;scroll:no;resizable:no;center:yes;window.showModalDialog(url, Object(传给弹出窗口的参数，可以是任何类型),feature)决定窗口的外观是第三个参数feature，其中center属性指定为yes,弹出窗口居中；如果想手动指定弹出窗口的具体位置，去掉center属性，用dialogTop(弹出窗口上边界居屏幕上的距离)dialogLeft(弹出窗口左边界居屏幕左的距离)属性如：(距离是px像素)，这里手动指定弹出窗口位置居中var iTop = (window.screen.availHeight-550)/2; //获得窗口的垂直位置，550为弹出窗口的height;var iLeft = (window.screen.availWidth-640)/2; //获得窗口的水平位置，640为弹出窗口的width;var feature =dialogWidth:615px;dialogHeight:505px;status:no;help:no;scroll:no;resizable:no;dialogTop:'+iTop+';dialogLeft:'+iLeft+';;2.window.open：var feature=width=615,height=505,menubar=no,toolbar=no,location=no,scrollbars=no,status=n o,modal=yeswindow.open(url, window(弹出窗口的名字), feature)手动指定弹出窗口位置，属性top：(弹出窗口上边界居屏幕上的距离)属性left：(弹出窗口左边界居屏幕左的距离)下面指定弹出窗口位置居中(这种方式没有center属性)：var iTop = (window.screen.availHeight-550)/2; //获得窗口的垂直位置,550为弹出窗口的height;var iLeft = (window.screen.availWidth-640)/2; //获得窗口的水平位置,640为弹出窗口的width;var feature=width=615,height=505,top=+iTop+,left=+iLeft+,menubar=no,toolbar=no,location=n o,scrollbars=no,status=no,modal=yes;子窗口调用父窗口的东东(控件或者方法)：1. window.open打开的子窗口有window.opener属性子窗口通过window.opener.xx获得父窗口的东东。

js实现iframe跨页面调用函数的方法

js实现iframe跨页⾯调⽤函数的⽅法本⽂实例讲述了js实现iframe跨页⾯调⽤函数的⽅法。

分享给⼤家供⼤家参考。

具体实现⽅法如下：在项⽬中难免会遇到这样⼀个问题就是页⾯引⼊了IFrame并且需要⽗页⾯调⽤⼦页⾯函数或者⼦页⾯需要调⽤⽗页⾯函数。

⽐如说：现在有两个页⾯parent.html和child.html。

其中parent.html中含有IFrame并且IFrame指向child.html。

现在需要在parent.html/child.html中调⽤child.html/parent.html的⼀个js⽅法。

具体的代码实现如下：parent.html⽗页⾯：复制代码代码如下:<html><head><script type="text/javascript"> function parent_click(){ alert("来⾃⽗页⾯"); }</script></head><body> <input type="button" value="调⽤本页⾯函数" onclick="parent_click();" /> <input type="button" value="调⽤⼦页⾯函数" onclick='window.frames["childPage"].child_click();' /> <iframe id="childPage" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe></body></html>child.html⼦页⾯：复制代码代码如下:<html><head><script type="text/javascript"> function child_click(){ alert("调⽤的⼦页⾯函数"); }</script></head><body> <input type="button" value="调⽤⽗页⾯函数" onclick='parent.window.parent_click();' /> <input type="button" value="调⽤本页⾯函数" onclick="child_click();" /></body></html>希望本⽂所述对⼤家基于javascript的web程序设计有所帮助。

iframe子父页面调用实例

iframe子父页面调用实例
导语：页面调用条用的方法有很多种，其中iframe子父页面调用，你会吗？下面就由店铺为您讲解一下，希望对你有所帮助。

1、iframe子页面调用父页面js函数
子页面调用父页面函数只需要写上window.praent就可以了。

比如调用a()函数，就写成：
window.parent.a();
子页面取父页面中的标签中的值，比如该标签的id为“test”,则：window.parent.document.getElementById("test").value;
jQuery方法为：
$(window.parent.document).contents().find("test").val();
但是我在chrome浏览器下却发现此方法无效了!查了半天才了解，在chrome 5+中，window.parent无法在file://协议中运行，但是发布了之后http://协议下是可以运行的。

此方法支持ie、firefox浏览器。

2、iframe父页面调用子页面js函数
这个就稍微复杂一些，下面的方法支持ie和firefox浏览器：
document.getElementById('ifrtest').contentWindow.b();
子页面取父页面中的标签中的值，比如该标签的id为“test”,则：document.getElementById("test").value;
注：ifrtest是iframe框架的id，b()为子页面js函数。

contentWindow属性是指定的frame或者iframe所在的window对象，IE下可以省略。

浅谈js中子页面父页面方法变量相互调用

浅谈js中⼦页⾯⽗页⾯⽅法变量相互调⽤
（1）⼦页⾯调⽤⽗页⾯的⽅法或者变量：
window.parent.⽅法()或者变量名
window.parent相当于定位到⽗页⾯之后的操作和在⽗页⾯中写代码⼀样写
window.parent.aa();//调取aa函数
window.parent.bb;//调取bb变量
例如：想在⼦页⾯中得到id为aaa的⽂本框的值
window.parent.$("#aaa").val();//这种写法的前提是引⽤了jquery
window.parent.getElementById("aaa").value; //js的写法
（2）⽗页⾯调取⼦页⾯
主要是通过contentWindow定位到⼦页⾯
document.getElementById("childframe").contentWindow.childtest();
//调取⼦页⾯中的childtest⽅法 js的写法
var childWindow = $("#addFrame")[0].contentWindow;//获取⼦窗体中的对象
childWindow.formSubmit();//调取⼦页⾯的formSubmit⽅法 jquery的写法
//注释：其中 childframe和addFrame 都时iframe的id
以上这篇浅谈js中⼦页⾯⽗页⾯⽅法变量相互调⽤就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

vue js中iframe调用父页面的方法

在Vue.js中，您可以使用自定义事件来实现iframe调用父页面的方法。

首先，在父页面中创建一个方法，该方法将作为被调用的目标：```javascriptmethods: {parentMethod() {// 在这里编写您想要执行的代码}}```然后，在父页面的模板中，将iframe放置在一个带有`ref`属性的元素中，以便稍后访问它：```html<template><div><iframe ref="myIframe" src="..."></iframe></div></template>```接下来，在父页面的生命周期钩子函数中，绑定一个事件监听器来处理从iframe发送过来的事件。

在这个例子中，我们将监听一个名为`callParentMethod`的事件：```javascriptmounted() {this.$nextTick(() => {const iframe = this.$refs.myIframe;if (iframe) {iframe.contentWindow.addEventListener('callParentMethod', this.parentMethod);}});}```现在，当在iframe内部触发`callParentMethod`事件时，父页面将调用`parentMethod`方法。

您可以在iframe中编写如下代码来触发该事件：```javascript// 在iframe内部编写如下代码：const callParentMethodEvent = new CustomEvent('callParentMethod', { detail: { message: 'Hello from iframe!' } });document.dispatchEvent(callParentMethodEvent);```这样，当您在iframe中触发`callParentMethod`事件时，父页面将调用`parentMethod`方法，并在控制台中输出“Hello from iframe！”消息。