chrome frameset鼠标调整宽度后设置rows无效
chrome浏览器下，frameset中的frame没有设置为noresize时，是可以通过鼠标来拖拽更改frame大小的（多有浏览器都可以），但是在chrome下如果鼠标拖拽更改过frame的大小，再设置frameset的rows/cols属性后，将无效，不会按照rows/cols设置的大小更改frame大小。如果要实现某个frame显示隐藏，将不会隐藏frame。
测试代码如下
1.html
<frameset id="theFrameSet" rows="70%,30%"> <noframes><body>很抱歉，馈下使用的浏览器不支援框架功能，请转用新的谷歌浏览器。</body></noframes> <frame id="frame1" src="2.html" frameborder="1"> <frame id="frame2" src="3.html" frameborder="1" > </frameset>
2.html
<input type="button" value="隐藏" onclick="setRow(this)" />
<script>
function setRow(btn) {
var hide = btn.value == '隐藏'; btn.value = hide ? '显示' : '隐藏';
var frame2 = parent.document.getElementById('frame2');
var el = parent.document.getElementById('theFrameSet');
el.rows= hide ? '100%,0' : '70%,30%'
}
</script>
3.html
<script>document.write(new Date().toLocaleString())</script>
chrome下鼠标调整frame高度后再点击2.html中按钮无法隐藏下面的frame。试过隐藏frame2的style display为none也不行。
解决办法就是从隐藏的时候从frameset中删除frame2，显示的时候再添加回来。但是大小无法修改，还是鼠标调整后的，这个无解，可能是chrome的bug。
function setRow(btn) {
var hide = btn.value == '隐藏'; btn.value = hide ? '显示' : '隐藏';
var frame2 = parent.document.getElementById('frame2');
var el = parent.document.getElementById('theFrameSet');
el.rows= hide ? '100%,0' : '70%,30%'
////////////
if (hide) el.removeChild(frame2);
else {
frame2 = document.createElement('frame'); frame2.id = 'frame2'; frame2.src = 'detail.html'; frame2.frameborder = 1;
el.appendChild(frame2);
}
}
加支付宝好友偷能量挖...
原创文章，转载请注明出处：chrome frameset鼠标调整宽度后设置rows无效