iframe使用的一些积累

1、首先需要被嵌入方允许嵌入

问题： same-site属性导致站点无法传输cookies 设置x-frame-options策略，只指node应用；

方案一：egg的配置文件中修改在[egg-security]的配置；

方案二：终极方案nginx设置忽略返回头的x-frame-options允许被iframe嵌入；

angular框架中还需要设置域名白名单；

2、监听iframe的onload提高用户体验

document.getElementById('eIframe').onload = function() {
    // iframe加载完成
 };

另外angular框架，可使用$q.defer实现异步

var iframeDef = $q.defer();
$scope.promise = iframeDef.promise;
setTimeout(function() {
  document.getElementById('eIframe').onload = function() {
    iframeDef.resolve();
  };
});

3、被嵌入方获取父级window.top与window.parent的写法

最好用window.parent，你的父级有可能也被别人嵌入了；

4、postMessage通信；

iframe子父级交互（如同步url参数），比较多的会使用到postMessage传递参数；

监听方：

 window.addEventListener(
      'message',
      function(event) {
        if (event.data.key === 'modalIframeCancel') {
          // 行为
        }
      },
      false
    );

发送方：

window.parent.postMessage({ key: 'modalIframeCancel' }, '*');

5、判断是否在iframe中的方法

// 1.方式一

if (window.frameElement && window.frameElement.tagName == "IFRAME") {
　　alert('在iframe中');
}

// 2.方式二
if (window.frames.length != window.parent.frames.length) {
　　alert('在iframe中');
}

//3.方式三  我常用
if (window != window.top) { 
　　alert('在iframe中');
}

6、隐去头尾、左导

方案一：通过url参数进行判断；

方案二：通过判断是否在iframe中，对于一些嵌入方内部跳转则必须用此方案，方法见5；

7、iframe自适应高度

设置固定高度

同源

相同主域名，设置document.domain，获取iframe中的内容，设置iframe；

跨域

跨域下，由于js的同源策略，父页面内的js不能获取到iframe页面的高度。

1、使用与主页面一样域名的代理页面。

2、使用postMessage通信（或者window.name）， 传递height

其他

获取比较好的用户体验，避免滚动条出现，可以通过 MutationObserver resize 进行dom变化监听。或者使用轮询