JavaScript 实现 iframe 分割栏动态切换
作者：拾光时间：2026-10-22 17:48:45浏览：196
本文介绍利用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需再刷新一下页面才能执行] 复制代码
作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58