IE10 对 frameset 的支持存在问题

今天又被 IE 坑了，而且还是 IE10。

有一个页面用 frameset 嵌了两个页面，然后通过改变 frameset 的 cols 来调整布局。别的浏览器安好，但 IE10 却没任何的反应。不是报错，值也确实地改变了，但布局没发生变化，当浏览器窗口大小发生变化时才会触发布局变更。示例代码如下（也可直接查看 Demo）：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>s</title>
    <script>
        function resize() {
            if(document.body.cols == '200,*') {
                document.body.cols = "300,*";
            } else {
                document.body.cols = '200,*';
            }           
        }
    </script>
</head>
<frameset cols="200,*">
    <frame src="1.html"></frame>
    <frame src="2.html"></frame>
</frameset>
</html>

内嵌的两个页面代码分别是

<!-- 1.html -->

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>1</title>    
</head>
<body>
    frame 1
    <p><button id="c">Change</button></p>
    <p><button id="f">Fix change in IE10</button></p>
    <script>
        document.getElementById('c').onclick = function(){
            window.parent.resize();
        };
    </script>
</body>
</html>


<!-- 2.html -->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>2</title>
</head>
<body>
    frame 2
</body>
</html>

解决思路是，强行触发重新渲染，这里通过改变 body 的宽度来实现，把 resize 函数修改一下。

function resize2() {
    resize();

    // force ie10 redraw
    if(navigator.userAgent.indexOf('MSIE 10.0') != -1) {
        var w = document.body.clientWidth;
        document.body.style.width = w + 1 + 'px';
        setTimeout(function(){
            document.body.style.width = w - 1 + 'px';
            document.body.style.width = 'auto';
        }, 0);  // 这个延时时间看情况可能需要适当调大
    }       
}

2条评论