javascript之Iframe之间通信

  • 时间:2018-07-25 23:24 作者:前端唠唠嗑 来源:前端唠唠嗑 阅读:384
  • 扫一扫,手机访问
摘要:本文探讨都是在同域(同一域名,同一端口,同一协议)下进行。以下我们探讨三个问题:1、iframe子页面和父页面相互获取元素,2、iframe子页面和父页面相互调使用方法和变量。一、iframe子页面和父页面相互获取元素1、子页面获取父页面元素//获取父页面 $("#id")的元素Js原生:windo

本文探讨都是在同域(同一域名,同一端口,同一协议)下进行。

以下我们探讨三个问题:1、iframe子页面和父页面相互获取元素,2、iframe子页面和父页面相互调使用方法和变量。

一、iframe子页面和父页面相互获取元素

1、子页面获取父页面元素

//获取父页面 $("#id")的元素

Js原生:window.parent.document.getElementById ("元素id");

Jquery: $("#id", parent.document);

2、父页面获取子页面元素

//获取子页面 $("#id")的元素

Js原生:window.frames[iframe序号].document.getElementById("元素id");

Jquery:$("#iframeID").contents().find("#元素ID");

javascript之Iframe之间通信

图1、获取元素

二、iframe子页面和父页面相互调使用方法和变量

1、子页面调使用父页面方法和变量

//调使用父页面方法和变量

window.parent.func(); //调使用方法

window.parent.value; //调使用变量

2、父页面调使用子页面方法和变量

//调使用子页面方法和变量

window.frames[iframe序号].func(); //调使用方法

window.frames[iframe序号].value; //调使用变量

javascript之Iframe之间通信

图2、调使用方法和变量

说明:

1、iframe之间相互通信的前提是页面加载完成,所以我们从上面可以看到 父页面获取子页面元素,调使用子页面方法、变量时用了window.frames[0].onload =function(){}包裹来确保子页面加载完成。

2、父页面获取子页面iframe内容不止上述一种方法,还可以iframe的id和iframeName来获取,即document.getElementById('iframeId').contentWindow.document.getElementById('子页面中的元素ID');和iframeName.window.document.getElementById('子页面中的元素ID');

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部