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

最新推荐文章于 2024-02-14 08:28:09 发布

原创最新推荐文章于 2024-02-14 08:28:09 发布 · 4.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ifrom

JQ 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了父页面与子页面间的元素获取与方法调用技巧，涵盖了JavaScript与jQuery的多种方式，包括父调子与子调父的方法和元素操作，为网页开发中的 iframe 嵌套提供了实用解决方案。

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

1、JS

父调子方法：
window.onload = function () {
    1、 document.getElementById("子页面元素ID").contentWindow.子页面方法名;
    2、 document.getElementsByTagName("子页面元素标签名")[i].contentWindow.子页面方法名;
    3、 document.getElementsByClassName("子页面元素类名")[i].contentWindow.子页面方法名;

  }

父调子元素：
winwindow.onload = function () {
dow.frames[iframe的name属性值];
}

子调父元素：
window.onload = function () {
1、window.parent.document.getElementById("父页面元素ID");
2、window.parent.document.getElementsByTagName("父页面元素标签名")[i];
3、window.parent.document.getElementsByClassName("父页面元素类名")[i];
}

子调父方法：
window.onload = function () {
window.parent.父页面方法;
}

2、JQ

父调子元素：
window.onload = function () {
	$(iframe选择器).contents().find(iframe中元素选择器);
}
父调子方法：
window.onload = function () {
	$(iframe选择器)[0].contentWindow.子页面方法名;
}


子调父元素：
window.onload = function () { 
$(父页面元素选择器, window.parent.document);
 window.parent.$(父页面元素选择器)window.parent.父页面方法;
}

子调父方法：
window.onload = function () { 
window.parent.父页面方法;
}