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