IE10 对 frameset 的支持存在问题

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 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 函数修改一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
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);  // 这个延时时间看情况可能需要适当调大
    }      
}

《IE10 对 frameset 的支持存在问题》有2个想法

评论已关闭。