返回上一级

超级好用的iframe高度自适应工具 iframe-resizer

html information-technology

iframe-resizer 库旨在消除使用 iframe 的痛点。它将调整您的 iframe 大小以匹配您的内容大小，然后监控 iframe 以确保它始终是完美的大小。

https://github.com/davidjbradshaw/iframe-resizer

父页面

 1<style>
 2    #tests {
 3        width: 100%;
 4        height: 100vh;
 5    }
 6</style>
 7<iframe id="tests" src="https://www.example.com/"></iframe>
 8<script src="https://cdn.jsdelivr.net/npm/@iframe-resizer/parent@5.3.2"></script>
 9<script type='text/javascript'>
10    iframeResize({ license: 'GPLv3', waitForLoad: true }, '#tests'); 
11</script>

如果页面存在多个 iframe，并且全部需要自动适应高度

可以使用 iframe 标签全选中，放到最后一个ifame后面执行

1<script type='text/javascript'>iframeResize({ license: 'GPLv3' },'iframe'); </script>

子页面

子页面的js用于和父页面通讯，对于一些简单的小组件，可以不需要这个

1<script src="https://cdn.jsdelivr.net/npm/@iframe-resizer/child@5.3.2"></script>