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无效

评论(0)Web开发网
阅读(91)喜欢(0)不喜欢(0)JavaScript/Ajax开发技巧