iframe 调整大小秒不调整大小

Question

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

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

iFrame Resizer 工作的唯一实例是第一个灯箱，通过“获取我的免费现场演示”按钮和其他几个按钮进行实例化。

连接到“问题？”的灯箱 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 调整大小的工作实例（最好包含来自不同域的内容）
2. 创建 iFrame 的第二个实例（使用不同的源）以在同一页面上调整大小
3. 测试 iFrame 的第二个实例是否会根据内容更改调整大小

提前感谢您的帮助！

Answer 1

查看控制台日志

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