框架集在通過鼠標調整大小後不能正確調整大小

我有一個框架集，其中一個框架中有一個按鈕可將其父框架集最小化爲特定大小。框架集在通過鼠標調整大小後不能正確調整大小

該代碼的工作原理，但問題是，如果我選擇用鼠標手動調整框架的大小，然後按最小化按鈕，它會在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

來源

2012-12-03 Codler

我也有這個問題。看起來無論你是否設置了cols，它總是與你調整它的大小有關，而不是全部。這似乎是一個webkit bug，因爲Safari的行爲與Chrome相同，而Firefox的行爲與預期相同！ – Joel

它出現在您使用框架邊框手動調整大小後，無法以編程方式正確調整框架大小。 – Joel

在Codlers示例js-code中，設置了第二個（內部）框架集的cols屬性。我猜測外框架是爲了設置。 – Rembunator

如果我理解正確你想設置一個對象，它是在一個不同的幀的屬性。有些瀏覽器不接受這種情況。

如果我嘗試重現您的問題，我可以看到，在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-18 09:26:28 Rembunator

我不認爲你已經理解了。我們試圖從任何窗口範圍（頂部，與frameset，child相同）設置可調整大小的框架集的cols屬性，並給出相同的結果。在使用鼠標調整框架集的框架後，如何呈現框架集是一個問題，而不是訪問框架屬性的安全問題。 – Joel

我更新了我的答案。 – Rembunator

令人驚訝的是，當我今天再次測試IE8時，它似乎可以正常工作，但仍然在Chrome中出現問題。 – Codler

看起來這是Webkit中的這個bug，自201年以來一直被忽略0：

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

來源

2013-10-01 17:31:10

我有同樣的問題，我用隱藏的建議，然後設置，然後重新出現，它爲我工作。見下面的例子：

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

他們的工作爲Chrome，火狐，IE11 &歌劇院。希望它適合你。

來源

2016-11-02 20:29:29

看來你不能在框架集對象上調用hide（）函數。將不得不從容器中刪除，然後設置屬性，然後重新添加到容器。 –

這對我有用。我創建了一個函數，可以「重置」cols，「later」設置正確的寬度。似乎復位後必須有一個超時或一種「觸及」子幀的循環

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-15 10:50:10 akovar

框架集在通過鼠標調整大小後不能正確調整大小

回答

相關問題