Набор фреймов не изменяется правильно после изменения размера мышью

У меня есть набор фреймов, где в одном фрейме есть кнопка, которая сводит к минимуму его исходный набор фреймов до определенного размера.

Код работает, но проблема заключается в том, что сначала я хочу сначала изменить размер рамки с помощью мыши, а затем нажать кнопку минимизации, которая будет неправильно изменена в 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

Ответы

Ответ 2

Это сработало для меня. Я создал функцию, которая "сбрасывает" cols и "позже" устанавливает правильную ширину. Кажется, должен быть тайм-аут после reset или какой-то цикл, который "касается" дочерних кадров

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 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 я могу переключать размер кадра (без проблем).

Однако в Chrome я получил ошибку безопасности, потому что я пытаюсь установить свойство на другой странице, а именно страницу набора фреймов внутри страницы внутри фрейма.

edit: Следующий код работает в IE8. Это то, что вам нужно?

Не забудьте добавить файл jquery-1.8.2.min.js

file: 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>

file: 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>

Ответ 4

У меня была одна и та же проблема, и я использовал предложение скрываться, затем настраивался, а затем снова появлялся, и это сработало для меня. Пример ниже:

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

Они работали в Chrome, Firefox, IE11 и Opera. Надеюсь, это сработает для вас.