iframe - iframe 调整大小秒不调整大小

Question

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

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

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

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

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

调整大小之前的第一个 iFrame

成功调整大小后：

成功调整大小后的第一个 iFrame

而之前的第二个：

尝试调整大小之前的第二个 iFrame

调整大小失败后：

调整大小失败后的第二个 iFrame

测试步骤：

1. 转到https://succeed.serenova.com/lp-cloud-contact-center/
2. 单击第一个“获取我的免费现场演示”按钮
3. 单击表单提交按钮“获取我的免费实时演示”并注意 iframe 会按应有的方式进行调整
4. 关闭模态
5. 向下滚动，直到看到“问题？”按钮 并点击它
6. 点击表单上的“提交”并注意 iFrame resizer 不会更新 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