父子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);
原文地址:https://www.cnblogs.com/ssszjh/p/13298590.html