iframe

正常的iframe父子方法调用

父调子：window.子iframe的name.子iframe的方法()；
子调父： window.parent.父iframe的方法()；

注：
webpack里无法父子iframe,调用各自的方法
是因为每个js已经形成函数域，隔绝起来了
解决：用window.方法名=方法名；把方法释放出来。

子iframe调用父iframe的DOM:window.parent.$("#xxx");

问题：调用iframe时，因为需要先设置高度，宽度，但是假如里面的iframe的内容是动态的呢？

之前把高度写死，导致有的弹窗iframe会留白很多。

解决1：等到iframe复制之后再去，再去动态获取子iframe的高度，改变iframe的高度，用定时器

$(".iframeUrl").attr('src',`department.htmlid=${$(this).data("id")}`);
$('#myModal4').modal('show');
setTimeout(() => {
    $(".iframeUrl").attr('height', document.body.scrollHeight);
}, 500)

缺陷:

因为不确定什么时候iframe渲染好，用500毫秒的时间去等待渲染

会白一下，要是接口响应比较慢，高度获取不完整，会出问题

解决2：直接在子iframe里赋值iframe的高度

需在接口请求完，渲染完成后执行

window.parent.$(".iframeUrl").attr('height', document.body.scrollHeight);

 

前进后退问题/url同步更新 iframe页面内部的跳转虽然不会让浏览器地址栏发生变化，但是却会产生一个看不见的“history记录”，也就是点击前进或后退按钮（history.forward()或history.back()）可以让iframe页面也前进后退，但是地址栏无任何变化。

处理就是内部跳转的时候，用postmessage通知父页面,父页面通过history.replaceState去更新URL，replaceStatus不会产生新记录，刚好跟看不见的history记录形成一个映射关系。

总得来说，就是把看不见转换成看得见