iframe高度自适应

iframe高度

之前用原生js写的iframe高度自适应方法都失效了，可能是浏览器不支持那样的写法，不过幸好的是还可以依赖jquery来处理

父层页面的结构：

      <div class="wrapper">
        <h1>这个是一个主页面，里面嵌套了一个iframe页面，iframe能高度自适应</h1>
      </div>
      <iframe id="iframe1" frameBorder=0 scrolling=no  src="test.html"  ></iframe>

方法1：写在父页面上

      <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(function(){
               $('#iframe1').load(function() {
                    var iframeHeight=$(this).contents().height();
                    $(this).height(iframeHeight+'px');
               });
            })
      </script>

方法2：写在父页面上

      <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(function(){
               $('#iframe1').css({
                  width: $(window).width(),
                  height: $(window).height() - $('.wrapper').height() - 10
                })
            })
      </script>

方法3：写在子页面上

      <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(function(){
               $(window.parent.document).find("#iframe1").load(function() {
                  var main = $(window.parent.document).find("#iframe1");
                  var thisheight = $(document).height() + 10;
                  main.height(thisheight);
               })
            })
      </script>