通过判断iframe是否存在来分别不同的业务处理

业务上遇到一个问题，普通的登录，有同事想要使用iframe 来嵌入登录页面。我这边需要修改框架代码，新增业务需求是这样的：如果不存在iframe则存储用户信息，跳转到首页； 如果存在iframe则存储之后，去刷新 iframe 之外的父窗口。

项目结构如下：

├─ testIframe/ 
　　├── index.html  ···················· index页面模块  
　　└── iframe.html ···················· iframe页面模块 

• index.html 如下：

  <body>
     <h1>index页面</h1>
     <iframe src="./iframe.html"></iframe>
  </body>

• iframe.html代码如下：

  <body>
  <h1>I am iframe</h1>
  </body>
  </html>
  <script type="text/javascript">
      // 判断是否存在iframe嵌套
      if(window.frameElement){
          console.log('Here do your job');
      } else {
          console.log('Here do your work');
      }
      // 判断是否存在iframe嵌套 当时业务简单来说是下面这样的，Demo当然不会直接用下面的方式，会有问题。
      // window.frameElement ? window.parent.window.location.reload() : window.location.href = url; 
  </script>

• 测试环境：
  请不要使用file协议来访问，npm 安装http-server后，使用http的形式起一个页面
  $ hs -o

• 测试结果：
  直接访问index.html 输出： Here do your work
  直接访问iframe.html 输出： Here do your job

关于 window.frameElement

• window.frameElement 兼容性：
  https://developer.mozilla.org/zh-CN/docs/Web/API/Window/frameElement

  经过测试后，新版safari 和 opera 浏览器也兼容。