iframe

之前有遇到iframe在ios上的问题，没有记录下来。今天又遇到了，感觉有必要记录一下。比如如下代码

1
2
3
4
5
6
7
8
<style>html,body:{padding:0}</style>
<body style="width:100%">
	<iframe width="100%" height="100%"/>
</body>
<body style="width:100%">
	<iframe style="width:100%;height:100%;"/>
</body>

上面的代码在pc和安卓上一般运行都没有问题。但是在ios上会发现实际页面宽度过宽，无论是使用iframe的width属性，还是直接设置css的width属性；都直接被ios忽略调，不起作用。

解决方案：

1
2
3
4
5
6
<style>html,body{padding:0}</style>
<body style="width:100%">
	<div style="overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;">
		<iframe id="con_ifr" src='+decodeURIComponent(hash.substr(1))+' frameborder="0" height="100%"  scrolling="no" style="width: 1px; min-width: 100%; *width: 100%;"></iframe>
	</div>
</body>


iframe min-width是可以生效的的，当然前提是要加上scrolling=”no”。这直接导致垂直方向上不能滑动。如果实在同域下也是可以解决的,那就是动态计算内部页面的高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if(/iphone/i.test(navigator.userAgent)){
	//iframe高度自适应内容高度
    var ifr = document.getElementById('ifr');
    function reinitIframe(){
        try{
            var bHeight = ifr.contentWindow.document.body.offsetHeight;
            var height = bHeight;
            if(ifr.height ==  height)
                return;
            ifr.height = height;
        }catch (ex){}
    }
    window.setInterval(reinitIframe.bind(this), 200);
}

如果不同域，目前我还没找到什么比较好的方案。

所以最好就退而求其次。让iframe自适应文本内容。在iframe外层添加wrapper。让iframe在其中滑动。