iframe高度宽度自适应

最近在项目中用到了iframe，写出来做个记录，能帮到大家最好。

一.首先简单介绍一下iframe

     iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

    所有浏览器都支持 <iframe> 标签。

二.页面引用

<iframe src="index.html" id="myiframe" scrolling="no" frameborder="0" width="100%" οnlοad="changeFrameHeight()" frameborder="0"></iframe>

三.设置iframe的高度自适应     

<!--set iframe height  -->
    <script type="text/javascript">
        function changeFrameHeight(){
            var iframe= document.getElementById("myiframe");
            iframe.height = iframe.contentDocument.body.clientHeight;
        }
        window.οnresize=function(){
            changeFrameHeight();
        }
    </script>

四.设置iframe的宽度自适应

 iframe的使用是为了引入一个子页面，如果说子页面是自适应的，那么宽度自适应自然很容易解决。
但是如果子页面是通过内容编辑器生成并且没有做自适应处理，那么问题就没那么简单了。
或许你会用viewport进行解决，这个也是一个思路，但是子页面与主页面的viewport之间的关联需要处理。

我说的这种情况自然不是用viewport。而是使用-webkit-transform:scale();对iframe进行缩放。实现设备是iPhone8与华为P8高配版。

首先说明，iframe的宽度如果不能自适应那么在两个设备的展现情况不一样。iPhone上边可以左右滚动以查看所有的内容，但是在安卓上边会自动截取手机屏幕宽度的iframe，也就是不会左右滚动。参考资料：https://www.cnblogs.com/qiuer/p/6420130.html

http://blog.csdn.net/u011511086/article/details/78519681

其次介绍一下有关-webkit-transform:scale();的用法，参考资料：http://caibaojian.com/transform.html

http://www.w3school.com.cn/cssref/pr_transform.asp

整体的思想就是计算出手机宽度与iframe内容宽度的比例，然后按照这个比例进行缩放，即-webkit-transform:scale();的作用。

所以就要获得两个宽度的值。

获取iframe的不同类型的宽度：Android  iPhone 手机浏览器获取子页面宽度。
    // var phoneWidth = document.body.clientWidth;//手机宽度
    // var iframeWidth = document.getElementById("myiframe").contentWindow.document.body.offsetHeight;//iframe宽度
    // 360  2602 ->  375 2628

    // var phoneWidth = document.body.clientWidth;//手机宽度
    // var iframeWidth = document.getElementById("myiframe").contentDocument.body.clientWidth;//iframe宽度
    // 360  310  ->  375 876

    // var phoneWidth = document.body.clientWidth;//手机宽度
    // var iframeWidth = document.body.scrollWidth;//iframe宽度
    // 360  360  ->  375 910

    // var phoneWidth = document.body.clientWidth;//手机宽度
    // var iframeWidth = document.getElementById("myiframe").contentWindow.document.body.scrollWidth;//iframe宽度
    // 360  884  ->  375 892  采用的这一种。

注释：箭头前是安卓设备，之后是苹果设备。第一个数是手机宽度，第二个数是iframe的宽度。

核心代码：

var obj = document.getElementById("myiframe");
        var phoneWidth = document.body.clientWidth;//手机宽度
        var iframeWidth = document.getElementById("myiframe").contentWindow.document.body.scrollWidth;//iframe宽度
        var n = phoneWidth/iframeWidth;//缩放比例

        if (userAgentInfo.indexOf('Android') > -1 || userAgentInfo.indexOf('Linux') > -1) {
            obj.width = iframeWidth + "px";
        }
        obj.style.webkitTransform="scale("+ n +")";

以上测试均是真机测试，浏览器包括QQ浏览器安卓与苹果版本，以及苹果和安卓的自带浏览器。

经过缩放之后会出现左右滑动，但是内容区域已经适应了手机宽度，这时再用document.body.style.overflowX="hidden";禁止左右滚动即可。以上均是自己的见解，如有不足之处还望多多见谅。

五.iframe的属性

  iframe常用属性:
  1.frameborder:是否显示边框，1(yes),0(no)
  2.height:框架作为一个普通元素的高度，建议在使用css设置。
  3.width:框架作为一个普通元素的宽度，建议使用css设置。
  4.name:框架的名称，window.frames[name]时专用的属性。
  5.scrolling:框架的是否滚动。yes,no,auto。
  6.src：内框架的地址，可以使页面地址，也可以是图片的地址。
  7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
  8.sandbox: 对iframe进行一些列限制，IE10+支持

六.iframe参考文档

https://segmentfault.com/a/1190000004502619#articleHeader6
https://www.cnblogs.com/inJS/p/6129945.html
http://www.cnblogs.com/tugenhua0707/p/3346522.html