iframe resizer第二个没有调整大小

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