10

あるフレームに、親フレームセットを特定のサイズに最小化するボタンがあるフレームセットがあります。

コードは機能しますが、問題は、最初にマウスで手動でフレームのサイズを変更してから最小化ボタンを押すと、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

4

4 に答える 4

2

2010 年以降無視されてきたのは、Webkit の次のバグのようです。

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

于 2013-10-01T17:31:10.843 に答える
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%,*');
    });
}
于 2016-11-15T10:50:10.693 に答える
0

私が正しく理解していれば、別のフレームにあるオブジェクトの属性を設定しようとしています。一部のブラウザはそれを受け入れません。

問題を再現しようとすると、Firefox でフレームのサイズを切り替えることができることがわかります (問題ありません)。

ただし、クロムでは、フレーム内のページ内から別のページ、つまりフレームセット ページにプロパティを設定しようとしているため、セキュリティ エラーが発生します。

編集: 次のコードは 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>
于 2013-02-18T09:26:28.677 に答える