本文介绍利用JavaScript动态控制iframe分割栏的显示与隐藏。通过操作frameset的cols属性，实现中间控制块宽度固定为10像素，并据此切换左右iframe的可见性。代码演示了如何根据当前布局状态切换左侧栏的display属性，从而完成界面的动态调整。
iframe分割栏动态切换原理
中间的控制区域实际上也是一个iframe，将其宽度设定为10像素。
随后在该区域的内部JavaScript中，对左右两个iframe进行控制。
JavaScript控制代码实现
具体实现代码如下：
function switchSysBar(){
if (parent.document.getElementById('attachucp').cols=="160,10,*"){
document.getElementById('leftbar').style.display="";
parent.document.getElementById('attachucp').cols="0,10,*";
}
else{
parent.document.getElementById('attachucp').cols="160,10,*";
document.getElementById('leftbar').style.display="none"
}
} <frameset id="attachucp" framespacing="0" border="0" frameborder="no" cols="160,10,*" rows="*"> <frame scrolling="yes" noresize="" frameborder="no" name="leftFrame" src="test.html"> </frame> <frame id="leftbar" scrolling="no" noresize="" name="switchFrame" src="swich.html"> </frame> <frame scrolling="yes" noresize="" border="0" name="mainFrame" src="https://www.jb51.net"> </frame> </frameset>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行] 复制代码