Js的iframe相关问题,如何判断当前是否在iframe中,iframe和它的父窗口如何通信
一、前言:
在web中,为了丰富我们的内容,往往需要引用其它HTML文件,这时候就需要用到 iframe 标签,本文就主要记录一下使用iframe所需要注意的问题
iframe 所使用的环境(笔者所遇到的)
1. web代码兼容 PC端 和 移动端,这时候就想在移动端时把页面限制在固定的宽高范围中,于是就使用 iframe 把 相关页面限制在其中
2. web引用别人的 HTML 内容,就使用iframe 来实现
二、遇到的问题:
1. 如何判断当前是否在iframe中
//
if (self.frameElement && self.frameElement.tagName == "IFRAME") {
alert('在iframe中');
} //
if (window.frames.length != parent.frames.length) {
alert('在iframe中');
} //
if (self != top) {
alert('在iframe中');
}
说明:
- 三种方式都是根据当前的窗口层级进行判断,
- 以上是针对有 <frameset> 或者 <iframe> 的页面,
- self.frameElement 可以获取到当前的 iframe 节点(如果有的话),否则为null
解释:window、top、parent、self 之间的联系和区别
- window : 当前窗口
- top: 顶层窗口,针对有很多层的iframe
- parent: 父级窗口,即当前窗口的上一层窗口
- self: 当前窗口,和window、window.self 等价
2. iframe 和 它的父窗口如何通信
注意有两种情况:
- iframe 和 父窗口 同源(即不会跨域,相同域名下),可以直接使用 节点 或 window 调用
- iframe 获取父窗口节点:parent.window.document.getElementById("parentNode")
- iframe 调用父窗口方法:parent.parentFunc();
- 父窗口获取 iframe节点:iframeObj.contentWindow.document.getElementById("childNode")
- this.myFrame表示 iframe对象
var obj=document.getElementsByTagName("iframe")[0].contentWindow;
var ifmObj=obj.document.getElementById("childNode");
var obj=document.getElementsByTagName("iframe")[0].contentWindow;
obj.parentFunc();
父窗口调用 iframe方法:iframeObj.contentWindow.parentFunc()
- iframe 和 父窗口 跨域(一般是调用别人的HTML )
- 必须使用安全的 postMessage方式来进行通信
// 向父窗口传值
window.parent.postMessage({code: 1, msg: '向父窗口传值'},*); // 向iframe传值
document.getElementsByTagName("iframe")[0].contentWindow.postMessage({code: 2, msg: '向iframe传值'},*); // 接收传值
window.addEventList('message', (e) => {
try{
if (e.data type e.data ==='string' ) {
console.log(e.data);
}
} catch (err) {
console.log(err)
}
});event.source
:发送消息的窗口,可以通过区分网址来接收消息event.origin
: 消息发向的网址,同上event.data
: 消息内容
说明:
otherWindow.postMessage(message,targetOrigin,[transfer]);
otherWindow: 其他窗口的一个引用,比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames;
message: 将要发送到其他window的数据,这个数据会自动被序列化,数据格式也不受限制,String字符串,对象(包括JSON)都可以;
targetOrigin: 通过窗口的origin属性来指定哪些窗口能接收到消息事件,这个值可以是"*"(表示无限制),或者一个URI。在发送消息的时候,如果目标窗口的协议、主机地址或者端口这三个的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送。如果你明确的知道消息应该发送到哪个窗口,那么请始终提供一个有确切值的targetOrigin,而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。
transfer(可选): 是一串和message 同时传递的
Transferable
对象. 这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。
三、最后
具体请看MDN: window.postMessage
Js的iframe相关问题,如何判断当前是否在iframe中,iframe和它的父窗口如何通信的更多相关文章
- iframe中的模态框遮罩父窗口原理
关键点: css的position定位为fixed或absolute css的z-index, 最顶层的值最大如遮罩层为0那么弹出框最好是大于等于1的整数,总之记住弹出层要比遮罩的z-index值大就 ...
- 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数
高并发分布式系统中生成全局唯一(订单号)Id 1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...
- JS中iframe相关的window.self,window.parent,window.top
window.self指的是当前窗口:他等价于window,self,window.self window.top指的是最顶层的窗口(有些页面可能会嵌套好几个iframe)如果只有一个窗口,那么就返回 ...
- soso官方:基于相关排序的判断
http://www.wocaoseo.com/thread-186-1-1.html 议程 概述 检索词 用户的信息需求 网页的自有信息 网页的附属信息 相关性的计算框架 概述 相关性的表象 检索词 ...
- JS框架设计之对象类型判断一种子模块
Javascript有两套数据类型,一套是基础数据类型,一套是对象数据类型.基础数据类型包括5种基本数据类型,分别是null,bool,undefined,number,string,也叫简单数据类型 ...
- jquery 实践操作:iframe 相关操作
此篇记录关于HTML 的 iframe 元素 的相关记录 定义:iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 常用的基本 iframe 设置(详细设置属性参考API:http:/ ...
- JS、JQ相关小技巧积攒
JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime() 获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面 ...
- JS判断网页是否在微信中打开/
JS判断网页是否在微信中打开,代码如下: <script type="text/javascript"> function is_weixn(){ var ua = n ...
- JS读取UserAgent信息并做判断
JS读取UserAgent信息并做判断 userAgent信息可以由navigator.userAgent拿到.例子: <script type="text/javascript&qu ...
随机推荐
- mac 搭建Java Spring boot 环境(idea)
首先安装插件 安装下面的这个插件 然后重启idea,新建工程 选择新建 Springboot 框架 改写项目名称 选择类型 设置工程名称 删除多余的文件 编译工程 然后运行 1. 2. 参考: htt ...
- [sdoi 2017]树点涂色
传送门 Description Bob 有一棵\(n\)个点的有根树,其中\(1\)号点是根节点.Bob 在每个节点上涂了颜色,并且每个点上的颜色不同. 定义一条路径的权值是,这条路径上的点(包括起点 ...
- shell 命令行参数(getopt和getopts)
getopt 命令 使用getopt命令,可以解析任何命令行选项和参数,但是用法比较复杂.getopt的命令用法如下: $ getopt --help 用法: getopt optstring par ...
- js控制网页窗口一打开就自动全屏
1.如果不需要开新窗口 在body区加入: <body onLoad= "javascript:window.resizeTo(screen.availWidth,screen.a ...
- @Autowired和@Resource的区别和联系
背景: 今天下班路上看到一个大货车,于是想到了装配,然后脑海里跳出了一个注解@Autowired(自动装配),于是又想到最近工作项目用的都是@Resource注解来进行装配.于是本着学什么东西都要一钻 ...
- Oracle之clob字段不能union的问题
原因:由于clob类型字段不能使用group by函数,而union中需要使用group by过滤掉重复纪录: 解决方法:union可以改为union all.
- [linux]测硬盘读写速度、内存读写速度
测硬盘的读写速度可以用以下命令:dd if=/dev/zero of=file bs=1M count=1024 测内存读写速度可以使用以下命令: dd if=/dev/zero of=/dev/nu ...
- Springboot 条件注解
@Conditional 根据满足某一个特定条件创建一个特定的 Bean.就是根据特定条件来控制 Bean 的创建行为,这样我们可以利用这个特性进行一些自动的配置 Springboot 中大量用到了条 ...
- Mariadb 10.3.17 中启用binlog
先检查是否开启了binlogSHOW VARIABLES LIKE 'log_bin';如果提示:+---------------+-------+| Variable_name | Value |+ ...
- 最好用的Redis Desktop Manager 0.9.3 版本下载
因为Redis Desktop Manager作者在 0.9.4 版本之后选择对所有的安装包收费,不再提供安装包下载,但是源码依旧公开. github 上有 redis destop manager ...