JS 在iframe子页面中调用和获取iframe父页面的方法和元素，以及在firame父页面中调用和获取iframe子页面的方法和元素

痛定思痛。 2023-10-05 07:30 35阅读 0赞

#### 1 iframe父页面 ####

HTML代码：

<iframe name='xudong' id='xudong' src='localhost:8080/' ></iframe>
    <div id="parentDiv"></div>

JS代码：

function parentTest(){
        alert("parentTest");
    }

#### 2 iframe子页面 ####

HTML代码：

<div id="subDiv"></div>

JS代码：

function subTest(){
        alert("subTest");
    }

#### 3 在iframe子页面中调用和获取iframe父页面的方法和元素 ####

（1）调用iframe父页面的方法

parentTest()是iframe父页面中的方法。

window.parent.parentTest();

（2）获取iframe父页面的元素

parentDiv是iframe父页面中的元素。

$("#parentDiv",window.parent.document).text();
    $("#parentDiv",parent.document).text();

#### 4 在iframe父页面中调用和获取iframe子页面的方法和元素 ####

（1）调用iframe子页面的方法

subTest()是iframe子页面的方法

window.frames["xudong"].subTest();
    window.frames[0].subTest();

（2）获取iframe子页面的元素

subDiv是iframe子页面的元素

$(window.frames["xudong"].document).find("#subDiv").text();
    $(window.frames[0].document).find("#subDiv").text();

注：

（1）frames\[param\]里面的param可以是iframe的索引，也可以是具体的名称。如果param为具体的名称时，要保证param是iframe的id或者name，同时iframe的id和name必须同名。

（2）iframe子页面必须跟父页面属于同一个服务器，否则父页面调用和获取iframe子页面的方法和元素会失败。

发表评论取消回复

表情：

评论列表（有 0 条评论，35人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 在iframe子页面中调用和获取iframe父页面的方法和元素，以及在firame父页面中调用和获取iframe子页面的方法和元素

1 iframe父页面 HTML代码： <iframe name='xudong' id='xudong' src='localhost:8080/' ></i

痛定思痛。/ 2023年10月05日 07:30/ 0 赞/ 36 阅读

相关 iframe中js调用父页面的使用方法

在iframe中调用父窗口的js函数 function return\_picurl(picurl,h\_id) \{ document.parentWind

末蓝、/ 2022年08月25日 05:17/ 0 赞/ 343 阅读

相关利用iframe进行父页面和子页面的通信

父页面parent.html: <span id='parentSpan'>父页面元素</span> <iframe src="child1.html" i

蔚落/ 2022年06月10日 10:38/ 0 赞/ 374 阅读

相关 html页面中iframe嵌套页面的父页面和子页面js方法互相调用

我们在写html页面或者说是jsp页面是，有时候需要在一个页面中使用iframe标签嵌套另一个页面，而两个页面有些数据需要交互，这个时候就会用到js技术，互相调用方法，当我

﹏ヽ暗。殇╰゛Y/ 2022年06月09日 03:18/ 0 赞/ 688 阅读

相关 iframe——html子页面调用父页面的方法

$( function () \{ //在iframe子页面中查找父页面元素 alert($( '\default' , window.parent.document

心已赠人/ 2022年05月25日 00:36/ 0 赞/ 543 阅读

相关 iframe父页面与子页面之间的元素获取与方法调用

1、JS 父调子元素： window.frames\[iframe的name属性值\]; 方法： ① document.getElementById("子页面

港控/mmm°/ 2022年04月13日 14:51/ 0 赞/ 1208 阅读

相关 iframe子页面获取父页面的文本值

iframe子页面获取父页面的文本值子页面直接获取： var yearMin = $(’\yearMin’, parent.document).val();

浅浅的花香味﹌/ 2022年03月20日 05:21/ 0 赞/ 502 阅读

相关 iframe 父页面调用子页面方法

<script type="text/javascript"> //调用子页面的方法. var childWi

￡神魔★判官ぃ/ 2022年03月14日 09:36/ 0 赞/ 1333 阅读

相关 jQuery iframe父页面和子页面相互调用

jQuery操作iframe父子页面相互操作父页面调用子页面子页面调用父页面父页面调用子页面根据iframe的id找到子页面，取

悠悠/ 2022年01月14日 10:07/ 0 赞/ 676 阅读

相关父iframe调用子iframe的方法及元素

摘要：在父iframe中调用子iframe的方法及元素假设：父页面内容：父页面中有个ID为mainFrame的子iframe，该iframe连接的src=

怼烎@/ 2021年09月14日 15:36/ 0 赞/ 947 阅读