标签: iframe

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

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

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

    父页面

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

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

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

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

    子页面

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

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