一、前言:

  在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");
    • 父窗口调用 iframe方法:iframeObj.contentWindow.parentFunc()

      • var obj=document.getElementsByTagName("iframe")[0].contentWindow;
        obj.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和它的父窗口如何通信的更多相关文章

  1. iframe中的模态框遮罩父窗口原理

    关键点: css的position定位为fixed或absolute css的z-index, 最顶层的值最大如遮罩层为0那么弹出框最好是大于等于1的整数,总之记住弹出层要比遮罩的z-index值大就 ...

  2. 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...

  3. JS中iframe相关的window.self,window.parent,window.top

    window.self指的是当前窗口:他等价于window,self,window.self window.top指的是最顶层的窗口(有些页面可能会嵌套好几个iframe)如果只有一个窗口,那么就返回 ...

  4. soso官方:基于相关排序的判断

    http://www.wocaoseo.com/thread-186-1-1.html 议程 概述 检索词 用户的信息需求 网页的自有信息 网页的附属信息 相关性的计算框架 概述 相关性的表象 检索词 ...

  5. JS框架设计之对象类型判断一种子模块

    Javascript有两套数据类型,一套是基础数据类型,一套是对象数据类型.基础数据类型包括5种基本数据类型,分别是null,bool,undefined,number,string,也叫简单数据类型 ...

  6. jquery 实践操作:iframe 相关操作

    此篇记录关于HTML 的 iframe 元素 的相关记录 定义:iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 常用的基本 iframe 设置(详细设置属性参考API:http:/ ...

  7. JS、JQ相关小技巧积攒

    JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime()  获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面 ...

  8. JS判断网页是否在微信中打开/

    JS判断网页是否在微信中打开,代码如下: <script type="text/javascript"> function is_weixn(){ var ua = n ...

  9. JS读取UserAgent信息并做判断

    JS读取UserAgent信息并做判断 userAgent信息可以由navigator.userAgent拿到.例子: <script type="text/javascript&qu ...

随机推荐

  1. mac 搭建Java Spring boot 环境(idea)

    首先安装插件 安装下面的这个插件 然后重启idea,新建工程 选择新建 Springboot 框架 改写项目名称 选择类型 设置工程名称 删除多余的文件 编译工程 然后运行 1. 2. 参考: htt ...

  2. [sdoi 2017]树点涂色

    传送门 Description Bob 有一棵\(n\)个点的有根树,其中\(1\)号点是根节点.Bob 在每个节点上涂了颜色,并且每个点上的颜色不同. 定义一条路径的权值是,这条路径上的点(包括起点 ...

  3. shell 命令行参数(getopt和getopts)

    getopt 命令 使用getopt命令,可以解析任何命令行选项和参数,但是用法比较复杂.getopt的命令用法如下: $ getopt --help 用法: getopt optstring par ...

  4. js控制网页窗口一打开就自动全屏

    1.如果不需要开新窗口 在body区加入: <body   onLoad= "javascript:window.resizeTo(screen.availWidth,screen.a ...

  5. @Autowired和@Resource的区别和联系

    背景: 今天下班路上看到一个大货车,于是想到了装配,然后脑海里跳出了一个注解@Autowired(自动装配),于是又想到最近工作项目用的都是@Resource注解来进行装配.于是本着学什么东西都要一钻 ...

  6. Oracle之clob字段不能union的问题

    原因:由于clob类型字段不能使用group by函数,而union中需要使用group by过滤掉重复纪录: 解决方法:union可以改为union all.

  7. [linux]测硬盘读写速度、内存读写速度

    测硬盘的读写速度可以用以下命令:dd if=/dev/zero of=file bs=1M count=1024 测内存读写速度可以使用以下命令: dd if=/dev/zero of=/dev/nu ...

  8. Springboot 条件注解

    @Conditional 根据满足某一个特定条件创建一个特定的 Bean.就是根据特定条件来控制 Bean 的创建行为,这样我们可以利用这个特性进行一些自动的配置 Springboot 中大量用到了条 ...

  9. Mariadb 10.3.17 中启用binlog

    先检查是否开启了binlogSHOW VARIABLES LIKE 'log_bin';如果提示:+---------------+-------+| Variable_name | Value |+ ...

  10. 最好用的Redis Desktop Manager 0.9.3 版本下载

    因为Redis Desktop Manager作者在 0.9.4 版本之后选择对所有的安装包收费,不再提供安装包下载,但是源码依旧公开. github 上有 redis destop manager ...