JavaScript中父页面Frame与子页面Frame之间页面元素的互相获取及方法的互相调用

最新推荐文章于 2021-08-26 23:00:12 发布

极乐谷2

最新推荐文章于 2021-08-26 23:00:12 发布

阅读量2.9k

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/u012815136/article/details/82781721

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、JavaScript中父页面Frame与子页面Frame之间页面元素的互相获取及方法的互相调用

父页面获取子页面元素

// 格式：$("#iframe的ID").contents().find("#iframe中的控件ID")
// 示例：iframeId 为 <iframe> 标签 id; buttonId 为子页面按钮 id
$("#iframeId").contents().find("#buttonId").click();

父页面调用子页面方法

// 格式：$("#iframe的ID")[0].contentWindow.iframe方法();
// 示例：iframeId 为 <iframe> 标签 id; myClickFun为子页面 js 方法
$("#iframeId")[0].contentWindow().myClickFun();

// 上面示例采用jQuery的API实现，如果需要使用原生js实现相应功能，如下
// 格式：document.getElementById("iframe的ID").contentWindow.iframe方法();
// 示例：iframeId 为 <iframe> 标签 id; myClickFun为子页面 js 方法
document.getElementById("iframeId").contentWindow.myClickFun();

子页面获取父页面元素

// 格式：$("#父页面元素id", parent.document);
// 示例：parentElementId 为父页面标签 id
$("#parentElementId", parent.document).click();

// 上面示例采用jQuery的API实现，如果需要使用原生js实现相应功能，如下
// 格式：window.parent.document.getElementById("父窗口元素ID");
// 示例：parentElementId为父页面标签 id
window.parent.document.getElementById("parentElementId");

子页面调用父页面方法

// 格式：$(parent)[0].父页面方法
// 示例：myParentFun 为父页面 js 方法
$(parent)[0].myParentFun();

// 上面示例采用jQuery的API实现，如果需要使用原生js实现相应功能，如下
// 格式：parent.父页面方法
// 示例：myParentFun 为父页面 js 方法
parent.myParentFun();