用鼠标调整大小后，框架集无法正确调整大小答案

【问题标题】：frameset do not resize correctly after resize by mouse用鼠标调整大小后，框架集无法正确调整大小
【发布时间】：2012-12-03 15:56:02
【问题描述】：

我有一个框架集，其中一个框架中有一个按钮，可以将其父框架集最小化到一定大小。

代码有效，但问题是如果我选择先用鼠标手动调整框架大小，然后按最小化按钮，它将在 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,*"，但仍以错误的大小呈现。

为什么在鼠标改变后大小调整不正确？我错过了什么还是浏览器中的错误？或者是否有其他解决方案可以在没有此错误的情况下调整框架大小？

示例

http://jsbin.com/ohihiy/2

【问题讨论】：

我也有这个问题。似乎无论您将 cols 设置为什么，它始终与您将其调整为的大小相关，而不是总数。这似乎是一个 webkit 错误，因为 Safari 的行为与 Chrome 相同，而 Firefox 的行为与预期相同！
一旦您使用框架边框手动调整大小，它就会出现，无法以编程方式正确调整框架大小。
在 Codlers 示例 js-code 中，设置了第二个（内部）框架集的 cols 属性。我猜外部框架集是要设置的。

标签： resize mouse frame frameset

【解决方案1】：

看起来这是自 2010 年以来被忽略的 Webkit 中的这个错误：

https://bugs.webkit.org/show_bug.cgi?id=36584

【讨论】：

【解决方案2】：

这对我有用。我创建了一个“重置”列并“稍后”设置正确宽度的函数。似乎重置后必须有超时或“触及”子帧的一种循环

function init_page() {
  function setCols(frms, cols) {
    // for some magic reason we have to 1st -> reset current cols 
    frms.setAttribute('cols', '');
    // and 2nd ask about child width (it's now clientWidth)
    for (var i = 0; i < frms.children.length; ++i) {
      if (frms.children[i] && (typeof frms.children[i].clientWidth != "undefined" || typeof frms.children[i].width != "undefined")) {
      }
    }
    frms.setAttribute('cols', cols);
  }
  // Minimize frame button
  $('#minimizeButton')
    .toggle(function () {
      setCols(parent.document.getElementsByTagName('frameset')[0], '50,*');
    },
    function () {
      setCols(parent.document.getElementsByTagName('frameset')[0], '50%,*');
    });
}

【讨论】：

【解决方案3】：

如果我理解正确，您尝试设置位于不同框架中的对象的属性。有些浏览器不接受。

如果我尝试重现您的问题，我可以看到在 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>

【讨论】：

我认为你没有理解。我们试图从任何窗口范围（顶部，与框架集相同，子级）设置可调整大小的框架集的 cols 属性，得到相同的结果。这是使用鼠标调整框架集大小后如何呈现框架集的问题，而不是访问框架属性的安全问题。
令人惊讶的是，当我今天再次在 IE8 上进行测试时，它似乎可以工作，但在 Chrome 中仍然存在问题。

【解决方案4】：

我遇到了同样的问题，我使用了隐藏的建议，然后设置然后重新出现，它对我有用。见下例：

var $frames = $( <parentElement> ).find( '<framesetname>' )[ 0 ];
frames.hide().attr('cols', '*,500').show();

他们为 Chrome、Firefox、IE11 和 Opera 工作。希望它对你有用。

【讨论】：

您似乎无法在框架集对象上调用 hide() 函数。必须从容器中删除，然后设置属性，然后重新添加到容器中。