Cod*_*ler 10 mouse resize frameset frame
我有一个框架集,在一个框架中有一个按钮,将其父框架集最小化到一定的大小.
代码可以工作,但问题是如果我选择先用鼠标手动调整框架,然后按最小化按钮,它将在IE8和Chrome中错误地调整大小.它在FF中正确调整大小.
我有这个HTML结构
...
<frameset cols="32%,*" border="2" frameborder="1" framespacing="1">
<frameset rows="350,*" border="2" frameborder="1" framespacing="1" id="searchResultFrameset">
<!-- The minimize button are in this frame searchResultFrame -->
<frame name="searchResultFrame" scrolling="no" src="dummy">
<frame name="itemFrame" frameborder="1" scrolling="no" id="itemFrame" src="dummy2"></frameset>
<frame name="contentFrame" frameborder="0" scrolling="yes" id="contentFrame" src="dummy3">
</frameset>
...
以及按下按钮时执行的代码.
// Minimize frame button
$('.minimizeFrame').toggle(function () {
parent.document.getElementsByTagName('frameset')[1].setAttribute('cols','22,*');
}, function () {
parent.document.getElementsByTagName('frameset')[1].setAttribute('cols','32%,*');
});
我可以看到开发人员工具中的cols="32%,*"更改cols="22,*",但仍然以错误的大小呈现.
为什么鼠标更改后调整不正确？我错过了什么或是浏览器中的错误？或者是否有可能在没有此错误的情况下调整框架大小的替代解决方案？
例
如果我理解正确，您尝试设置不同框架中的对象的属性。有些浏览器不接受这一点。
如果我尝试重现您的问题，我可以看到在 Firefox 中我可以切换框架的大小（没问题）。
然而，在 chromium 中，我收到一个安全错误，因为我试图在另一个页面上设置一个属性，即框架内页面内的框架集页面。
编辑： 以下代码适用于 IE8。这是你需要的吗？
不要忘记添加 jquery-1.8.2.min.js 文件
文件：index.html
<!doctype html public "-//w3c//dtd html 4.01 frameset//en"
"http://www.w3.org/tr/html4/frameset.dtd">
<html>
<head>
<title>a simple frameset document</title>
</head>
<frameset cols="32%,*" border="2" frameborder="1" framespacing="1">
<frameset rows="350,*" border="2" frameborder="1" framespacing="1" id="searchResultFrameset">
<!-- The minimize button are in this frame searchResultFrame -->
<frame name="searchResultFrame" scrolling="no" src="frame1.html">
<frame name="itemFrame" frameborder="1" scrolling="no" id="itemFrame" src="dummy2"></frameset>
<frame name="contentFrame" frameborder="0" scrolling="yes" id="contentFrame" src="dummy3">
</frameset>
</html>
文件：frame1.html
<html>
<head>
<script src="jquery-1.8.2.min.js"></script>
<script>
$(init_page);
function init_page()
{
// Minimize frame button
$('#minimizeButton')
.toggle(function ()
{
parent.document.getElementsByTagName('frameset')[0].setAttribute('cols','22,*');
},
function ()
{
parent.document.getElementsByTagName('frameset')[0].setAttribute('cols','32%,*');
});
}
</script>
</head>
<body>
<button id='minimizeButton'>toggle</button>
</body>
</html>