动态恢复iframe的宽度和高度，以使其内容适应合适的大小。

13 浏览
0 Comments

动态恢复iframe的宽度和高度，以使其内容适应合适的大小。

我试图通过动态获取 iframe 的宽度和高度，并将它们的值赋给变量，以便在页面加载时调整另一个元素的大小。在控制台中出现了以下错误：\n

\njQuery.Deferred异常：无法读取null的 \'width\' 属性 类型错误：无法读取null的 \'width\' 属性，位于 HTMLDocument。\n

\nHTML\n

\njQuery\n

$(function()
{
   var frameEl = window.frameElement;
   var widthIframe = frameEl.width;
   var heightIframe = frameEl.height;
   $(".mediaplayer").css("height", heightIframe + "px"); // 设置高度为 360px
   $(".mediaplayer").css("width", widthIframe + "px");  // 设置宽度为 640px
});

0

1 答案

0 Comments

在处理iframe的时候，有时候我们希望能够根据iframe内容的大小动态调整iframe的宽度和高度，以适应内容的大小。然而，这个问题的出现是因为iframe本身是一个独立的文档，其内容的大小和外部页面的大小并没有关联。

为了解决这个问题，我推荐使用一个跨浏览器的库，即iframe-resizer。这个库可以帮助我们自动调整iframe的宽度和高度，以适应内容的大小。

使用这个库非常简单。首先，我们需要在页面中引入该库的脚本文件。然后，在需要自适应的iframe标签中添加一些自定义的属性，例如data-iframe-resizer。接下来，我们可以使用JavaScript代码初始化该库，并传递一些配置选项。

下面是一个示例代码：

在上面的代码中，我们在一个iframe标签中添加了data-iframe-resizer属性。然后，引入了iframe-resizer库的脚本文件。最后，我们使用iFrameResize函数初始化该库，并传递一些配置选项。

通过使用这个库，我们可以实现自动调整iframe的宽度和高度，以适应其内容的大小。这样，不论iframe中的内容有多大，都可以正确地显示出来，提供更好的用户体验。

0