iframe resizer第二个没有调整大小

Posted 2021-05-06

我正在尝试在下面的页面中包含多个具有不同来源的高度调整iFrame：

https://succeed.serenova.com/lp-cloud-contact-center/

iFrame Resizer工作的唯一实例是第一个灯箱，它通过“Get My Free Live Demo”按钮和其他几个灯箱实例化。

灯箱的iFrame连接到“问题？”并且“下载Gartner报告”按钮不起作用，尽管以完全相同的方式实现。

这是调整大小之前的第一个灯箱：

First iFrame Before Resize

并成功调整大小后：

First iFrame After Successful Resize

而第二个之前：

Second iFrame Before Resize Attempt

调整失败后：

Second iFrame After Failed Resize

测试步骤：

1. 去https://succeed.serenova.com/lp-cloud-contact-center/
2. 单击第一个“获取我的免费现场演示”按钮
3. 点击表单提交按钮“获取我的免费直播演示”，并注意iframe会按预期进行调整
4. 关闭模态
5. 向下滚动，直到看到“问题？”按钮。然后单击它
6. 点击表单上的“提交”，注意iFrame大小调整器不会更新iFrame大小

或者，自己复制：

1. 在页面上创建iFrame resizer的工作实例（最好包含来自不同域的内容）
2. 创建iFrame的第二个实例（具有不同的源）以在同一页面上调整大小
3. 测试iFrame的第二个实例是否在内容更改时调整大小

在此先感谢您的帮助！

答案

查看您的控制台日志

iframeResizer.js:634 Failed to execute 'postMessage' on 'DOMWindow': 
The target origin provided ('https://pi.pardot.com') does not match the 
recipient window's origin ('https://go.pardot.com').

您需要设置checkOrigin属性来解决此问题。

https://github.com/davidjbradshaw/iframe-resizer#checkorigin