javascript - 如何根据给定的 URL 高度设置 iframe 高度

Question

实际上，我无法根据给定的 URL 设置动态高度。当时我正在使用下面的代码。

<iframe id="myframe" src="http://example.com" scrolling="yes" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:auto; width:100%; height: 100%;"></iframe>

如果可能的话，请给我建议任何解决方案。

Answer 1

您可以通过获取 iframe 大小并根据该大小进行调整来做到这一点；

<script type="text/javascript">
  function resizeIframe() {
      var iframe = document.getElementById('myframe');
      if( iframe ) {
            iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
            iframe.width = iframe.contentWindow.document.body.scrollWidth + "px";
      }   
  }
</script> 

在你的框架中；

<iframe id="myframe" src="http://example.com" scrolling="yes" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" onload="resizeIframe()"></iframe>

更新:跨域

如果加载的 iframe url 与您的域不同，您将因 CORS 而出现权限错误.您需要为您的域授予对 iframe 域的权限。让我们说;

iframe 域:http://example.com

您的域名:http://yourdomain.com

在Iframe域，Apache conf中，你需要在<Directory>里面设置header , <Location> , <Files>或 <VirtualHost >;

Header always append Access-Control-Allow-Origin: "example.com"

如果域名不是您的，您可以使用iframe-resizer .简单地，添加这个库并运行；

iFrameResize();