iframe自适应问题

对于iframe自适应的问题，网上也有很多相关的代码分析，这里添加上我使用过且已经生效的代码

1.适用页面中有单个多种iframe的情况

        // iframe高度自适应(适用于多个iframe)
    var iframeidsnums = document.getElementsByTagName("IFRAME")
    var iframeids = [] //存储iframe的id值
    for (var i = 0; i < iframeidsnums.length; i++) {
      iframeids[i] = iframeidsnums[i].id;
    }
    console.log(iframeids)
    //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏
    var iframehide = "yes";
    function dyniframesize() {
      var dyniframe = new Array()
      for (i = 0; i < iframeids.length; i++) {
        if (document.getElementById) {
          //自动调整iframe高度
          dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
          if (dyniframe[i] && !window.opera) {
            dyniframe[i].style.display = "block";
            if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) {
              dyniframe[i].style.height = (dyniframe[i].contentDocument.body.offsetHeight + 20) + 'px';
            } else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) {
              dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
            }
          }
          //根据设定的参数来处理不支持iframe的浏览器的显示问题
          if ((document.all || document.getElementById) && iframehide == "no") {
            var tempobj = document.all ? document.all[iframeids[i]] : document.getElementById(iframeids[i]);
            tempobj.style.display = "block";
          }
        }
      }
    }
   
    if (window.addEventListener) {
      window.addEventListener("load", dyniframesize, false);
    } else if (window.attachEvent) {
      window.attachEvent("onload", dyniframesize);
    } else {
      window.onload = dyniframesize;
    }

2.适用页面中有单个多种iframe的情况

        function reinitIframe(val) {
            var iframe = document.getElementById(val);
            try {
                var bHeight = iframe.contentWindow.document.body.scrollHeight;
                var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                var height = Math.max(bHeight, dHeight);
                iframe.style.height = height + 'px';
            } catch (ex) {}
        }
        window.onload = function () {
            // reinitIframe('external-frame6');
            var iframeidsnums = document.getElementsByTagName("IFRAME")
            for (let i = 0; i < iframeidsnums.length; i++) {
                console.log(iframeidsnums[i].id)
                reinitIframe(iframeidsnums[i].id);
            }
        };

3.适用页面中有单个多种iframe的情况

    function reinitIframe(val) {
      var iframe = document.getElementById(val);
      try {
        var bHeight = iframe.contentWindow.document.body.scrollHeight;
        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        var height = Math.max(bHeight, dHeight);
        iframe.style.height = height + 'px';
      } catch (ex) {}
    }

    var iframeidsnums = document.getElementsByTagName("IFRAME")
    for (let j = 0; j < iframeidsnums.length; j++) {
      iframeidsnums[j].onload = function () {
        console.log(iframeidsnums[j].id)
        reinitIframe(iframeidsnums[j].id);

      }
    }

4.上面的自适应方法适应是没有问题的，但是由于我的使用场景不一样，因此会有出现一些小bug。

4.1 我的大概需求如下图

在页面上我有多个iframe标签，且经过tab的切换，切换到不同的iframe，我出现的问题是这个自适应效果值能是首屏显示的时候起到了自适应的效果。我百思不得其解，然后我追根溯源，实现iframe的自适应无非是为了使其中内容发生变化的时候计算总内容的高度，然后赋值给iframe标签，于是我想到，首屏既然可以自适应成功那说明逻辑上是没有问题的，于是开始排除。

• 浏览器没有刷新
• 在切换tab的时候iframe页面以及加载完毕，但是iframe没有来得及加载

解决方式：

在每次点击tab的时候，对于所获取到页面的所有iframe让其重新刷新加载一遍，这样就可以动态实现iframe的自适应。

    //分类tabs
    $(".mian-tab-ul>li").click(function () {
      let index = $(this).index();
      $(".main-details>.main-details-blocks").css("display", "none");
      $(this).addClass('add-bg-color').siblings().removeClass('add-bg-color');
      $(".main-details>.main-details-blocks")[index].style.display = "block";
      var iframeidsnums = document.getElementsByTagName("IFRAME")
      var iframeids = [] //存储iframe的id值
      for (var i = 0; i < iframeidsnums.length; i++) {
        iframeids[i] = iframeidsnums[i].id;
        document.getElementById(iframeids[i]).contentWindow.location.reload(true);
      }
    });