Блог

У нас есть набор фреймов (не iFrames!) приложение, В котором нам нужно сохранить состояние фреймов, которые выбирают пользователи .. а затем восстановить это состояние при следующем посещении страницы..

Использование jQuery в качестве предпочтительного оружия . вот как далеко мы продвинулись..

  <frameset rows="40,600,40" id="myframeset" name="myframeset">

     <frame name="mytop" id="mytop" src="http://xyz.com/top.html">

     <frameset cols="50%,50%">
        <frame name="leftframe" id="leftframe" src="http://xyz.com">
        <frame name="rightframe" id="rightframe" src="http://xyz.com">
     </frameset>

     <frame name="mybottom" id="mybottom" src="http://xyz.com/bottom.html">

</frameset>
  

Запуск некоторого jQuery в любом из дочерних фреймов.. (скажем, mybottom) легко извлекать значения строк из верхней области набора фреймов…

 var myrows = $('#myframeset', top.document).attr('rows'); 
   alert(myrows);  // returns 40,600,40
  

и также легко изменить высоту фрейма с помощью jQuery .attr…

 $('#myframeset', top.document).attr({'rows':'0,*,300'});

var myrows = $('#myframeset', top.document).attr('rows'); 
   alert(myrows); // returns 0,*,300
  

Но кажется, что когда пользователь перемещает фреймы, чтобы изменить высоту самостоятельно, вручную..
это не влияет на то, что возвращает attr

( переместите фреймы вручную, затем нажмите кнопку …)

 $("button").click(function() {

  var myrows = $('#myframeset', top.document).attr('rows'); 
    alert(myrows);  //  always returns 0,*,300
  

Я чувствую, что здесь мне не хватает простой концепции.. пожалуйста, сообщите
, есть ли способ, которым мы можем получить значения набора фреймов (onUnload), поместить их
в файл cookie .. и затем восстановить onload при следующем посещении пользователем страницы

Большое спасибо..

PS .. если это невозможно сделать с помощью строк / столбцов .. возможно, с высотой / шириной окна?

Чтобы завершить сбор (вы уже создали функцию для настройки строк):

 function getTopRows(){
    var rows = [];
    var main = $("#myframeset", top.document);

    //Get the whole height of the main <frameset>
    var wholeheight = $(main).height();

    //Calculate the relative height of each frame (child) of the main <frameset>
    main.children().each(function(){
         rows.push(Math.round(100*$(this).height()/wholeheight));
    });

    rows = rows.join("%,") "%"; //Example: 6%,87%,6%
    return rows;
}
  

Вызов getTopRows() возвращает строку относительных единиц измерения, которую можно использовать для установки верхних строк. Это значение можно сохранить с помощью плагина jQuery cookie:

 //You can add this function as an event listener to a button
function saveTopRows(){
    var topRows = getTopRows();
    $.cookie("rows", topRows); //Save data
}

//Execute on load of the page:
(function(){//Anonymous wrapper to prevent leaking variables
    var rows = $.cookie("rows");
    if(rows) $("#myframeset", top.document).attr("rows", rows);
})();
  

Не забудьте добавить плагин jQuery cookie, либо определив его в исходном коде, либо добавив внешний JS-файл. Источник плагина Cookie см. На веб-сайте jQuery. После загрузки исходного кода сохраните его как «jquery.cookie.js «, и добавьте этот код:

 ...
<script src="jquery.cookie.js"></script>
<script>
  function getTopRows(){
  //Rest of code
  

Используйте плагин jQuery cookie и сделайте что-то вроде этого:

 $(window).unload(function() {
   var myrows = // get the stuff you need 
   $.cookie("mycookie", myrows, { expires: 10 }); //expires in ten days
});
  

Затем сделайте что-то подобное, чтобы получить значения при загрузке:

 if ($.cookie("mycookie") {         //check if the cookie exists
   myrows = $.cookie("mycookie");  //then get the values
} else {
   //do something else if the cookie does not exist
}
  

Если attr() не работает для вас, попробуйте prop()