支持跨域的iframe自适应高度方法

HTML中的iframe标签可以达到将其他网页嵌入其中的效果，但经常因高度不同而产生滑条或造成大量的空白。通常的自适应方法可能无法支持跨域的情况，这就会在部署中受到一定的限制。本文将介绍一种可行的方法，使iframe能够根据内容高度自适应，并且支持跨域的情况。

前提：本方法需要对iframe中的网页进行修改以传递高度信息，若无法修改则不能使用。

本文采用Github上的iframe-resizer方案

一、修改被展示的页面（即iframe内页面）

请在html文件内加入以下内容以引用脚本：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.7/iframeResizer.contentWindow.min.js"></script>

当然你也可以将js文件下载到您的网站，src改为如“./js/iframeResizer.contentWindow.min.js”的形式。

PS：这个脚本在没有收到iframe获得高度消息的情况下不会被激活。

二、修改iframe所在页面

请在html文件内加入以下内容以引用脚本：（同样可保存在您的网站）

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.7/iframeResizer.min.js"></script>

然后加入以下脚本：（也可以单独保存为js文件，并以类似上边的方法引用）

    <script type="text/javascript">
      /*
       * If you do not understand what the code below does, then please just use the
       * following call in your own code.
       *
       *   iFrameResize({log:true});
       *
       * Once you have it working, set the log option to false.
       */

      var callbackDisplay = 'p#callback'

      iFrameResize({
        log: false, // Enable console logging
        inPageLinks: true,
        onResized: function (messageData) {
          // Callback fn when resize is received
          $(callbackDisplay).html(
            '<b>Frame ID:</b> ' +
              messageData.iframe.id +
              ' <b>Height:</b> ' +
              messageData.height +
              ' <b>Width:</b> ' +
              messageData.width +
              ' <b>Event type:</b> ' +
              messageData.type
          )
        },
        onMouseEnter: function (messageData) {
          // Callback fn when mouse enters iframe
          $(callbackDisplay).html(
            '<b>Frame ID:</b> ' +
              messageData.iframe.id +
              ' <b>ScreenX:</b> ' +
              messageData.screenX +
              ' <b>ScreenY:</b> ' +
              messageData.screenY +
              ' <b>Event type:</b> ' +
              messageData.type
            )
        },
        onMouseLeave: function (messageData) {
          // Callback fn when mouse enters iframe
          $(callbackDisplay).html(
            '<b>Frame ID:</b> ' +
              messageData.iframe.id +
              ' <b>ScreenX:</b> ' +
              messageData.screenX +
              ' <b>ScreenY:</b> ' +
              messageData.screenY +
              ' <b>Event type:</b> ' +
              messageData.type
          )
        },
        onMessage: function (messageData) {
          // Callback fn when message is received
          $(callbackDisplay).html(
            '<b>Frame ID:</b> ' +
              messageData.iframe.id +
              ' <b>Message:</b> ' +
              messageData.message
          )
          alert(messageData.message)
          document
            .getElementsByTagName('iframe')[0]
            .iFrameResizer.sendMessage('Hello back from parent page')
        },
        onClosed: function (id) {
          // Callback fn when iFrame is closed
          $(callbackDisplay).html('<b>IFrame (</b>' + id + '<b>) removed from page.</b>')
        },

      })
    </script>

然后页面中的iframe内容就可以自适应了。

如果遇到问题，您可参照作者提供的iframe所在页面和iframe内展示页面的html文件修改。实现后的效果见此样例。

参考资料：

• davidjbradshaw/iframe-resizer: Keep same and cross domain iFrames sized to their content with support for window/content resizing, in page links, nesting and multiple iFrames – Github