调整 iframe 大小以适应父级 div

Question

我创建了一个 Adobe Edge 动画，我将其导出为响应式 HTML 和 Javascript。

您可以在此处将动画作为单个 html 文件查看：(u: demo p: testing)

https://boomboxdevdev.wpengine.com/boombox_anim/boombox_HTML5_Canvas.html

我现在想使用 iframe 将动画嵌入到 divi 代码模块中。

我已经这样做了，可以在这里查看：(u: demo p: testing)

https://boomboxdevdev.wpengine.com/

我正在尝试使 iframe 完全适合父 div，但不知道如何。

我将 wordpress 与 Divi 和页面构建器一起使用。

Answer 1

简答：如果不能同时控制父级和 iframe 源代码，则不能。

if iframe 的全部意义在于，父级不知道 iframe 中运行的内容，也无法访问其中的任何内容。否则 难以置信 不安全（事实上，曾经是。曾几何时，您可以将银行的网站嵌入 iframe，然后查询 iframe。那是一个疯狂的时代) 因此，如果您知道内容的大小：通过指定 width 和 height 属性使 iframe 标记使用该大小。

如果您不这样做：您将必须使用 postMessage 协商动态调整大小，确保 iframe 的页面具有 JS 以接受询问其内容尺寸的消息，以便父级可以post 该消息并得到一个 width/height 返回，然后它可以用来调整 iframe 元素的大小。

或者如果那不是一个选项：你真倒霉。

Answer 2

您的问题之一是您的 iframe 具有以下 onload

onload="this.width=screen.width;this.height=screen.height"

因此，无论内容如何，iframe 都保持在其加载屏幕的高度，但最大宽度限制为 100%。虽然您的 iframe 内容有一些代码可以动态调整它的大小。您可以尝试破解一些东西以根据视口设置尺寸，并且您知道 iframe 内容的尺寸也将是因为您可以控制它，但如果有任何更改，您将不得不重做。

但是如果你拥有所有这些，你能不能不使用 html 和生成的脚本并将它们作为另一个元素引入页面而不是使用 iframe？

调整 iframe 大小以适应父级 div

Resizing iframe to fit in parent div

javascript

css

iframe

divi