Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Проблема с Frame


Автор: TheDestroyer 14.9.2011, 18:51
Здравствуйте!
Пытаюсь сделать так, чтобы при заходе на любую страницу открывалась одна и таже структура с двумя фрэймами. Это необходимо для избежания случаев, когда пользователь зашел на страницу без фрэймов.
Перечитал весь инет, наиболее подходящий вариант такой:
Фаил index.htm
Код

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FRAME</title>
 </head>
 <script type='text/javascript'>
 if (parent.frames.length==0) 
{ // если не во фрэйме - создаем фрэймы
document.write("<frameset frameborder='0' bordercolor='maroon' rows='60px,*'>");
document.write("<frame name='audio_player' src='frame1.htm' scrolling='no' noresize>");
document.write("<frame name='main_site' src='frame2.htm'>");
document.write("</frameset>");
} // if (parent.frames.length==0) 
 </script>
</html>


Такой же скрипт вставляю на страницах frame1.htm и frame2.htm.
Проблема: Если пользователь зашел на index.htm, то все нормально, а вот если на frame1.htm, то структура с frameset сохраняется но внутри первого фрэйма пусто, аналогично и со вторым - если зайти на frame2.htm, то 1й отобразится, а второй - нет.

Чтобы избежать вопросов зачем вообще фрэймы - нужно поставить на сайте аудио плеер с непрерывной музыкой при переходе по страницам.
Ajax не подходит в данном случае, т.к. сайт на CMS, переделывать на аякс - куча проблем. Пример условный, но проблему воспроизводит.

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

Автор: InfMag 14.9.2011, 21:19
TheDestroyer, недостаточно контекста. Я вот не пойму, если это вся страница, то почему просто код фреймов не написать?

Добавлено через 4 минуты и 41 секунду
Я бы на Вашем месте так поступил:
Код

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Тег FRAME</title>
        <script type='text/javascript'>
        if (parent.frames.length==0) {
            location = '/frameset_page?location=' + location;
        }
        </script>
    </head>
    <body>Тут контент страницы.</body>
</html>

А там уже словить location и подставить его: 
Код

<frame name="main_site" src="#CЮДА#" />

Автор: TheDestroyer 14.9.2011, 21:57
Спасибо за ответ.
Поясню подробнее. В данном примере код фреймов очень простой:
frame1.htm и frame2.htm отличаются только надписью в body:
Код

<html> 
<head> 
<title>Listing 15-4</title>
 <script type='text/javascript'>
 if (parent.frames.length==0) 
{ // если не во фрэйме - создаем фрэймы
document.write("<frameset frameborder='1' bordercolor='maroon' rows='60px,*'>");
document.write("<frame name='audio_player' src='frame1.htm' scrolling='no' noresize>");
document.write("<frame name='main_site' src='frame2.htm'>");
document.write("</frameset>");
} // if (parent.frames.length==0) 
 </script> 
</head>
<body> 
!!!!!!!!!!!!! Аудио плеер!!!!!!!!!!!!!!!!!
</body> 
</html> 

Оказываается, что в IE и FF глюк, а в хроме и опере нормально работает.
В Вашем примере при переходе на произвольную страницу произойдет обновление страницы - пререход на специально заготовленную с фреймами, а с нее уже должны начатьгрузиться оба фрейма. Редирект нежелателен, т.к. вид у сайта сразу портится (мне, лично, начинает напоминать всякие файлообменники с кучей рекламы и их накрутками). Идея в том, чтобы сразу при заходе на произвольную страницу загрузить сайт и плеер в нужных фреймах. 

Автор: InfMag 15.9.2011, 00:49
TheDestroyer, могу порекомендовать: http://htmlbook.ru/html/iframe

Добавлено через 2 минуты и 26 секунд
TheDestroyer, а ваша манипуляция довольно смутная, в таком случае вам надо предварительно убить dom <body>.

Добавлено через 4 минуты и 6 секунд
TheDestroyer, и как минимум выводить структуру тегов лучше сразу, к примеру так:
Код

<html> 
<head> 
<title>Listing 15-4</title>
 <script type='text/javascript'>
 if (parent.frames.length==0) 
{ // если не во фрэйме - создаем фрэймы
var structure = ''
  +"<frameset frameborder='1' bordercolor='maroon' rows='60px,*'>"
  +"<frame name='audio_player' src='frame1.htm' scrolling='no' noresize>"
  +"<frame name='main_site' src='frame2.htm'>"
  +"</frameset>";
document.write(structure);
} // if (parent.frames.length==0) 
 </script> 
</head>
<body> 
!!!!!!!!!!!!! Аудио плеер!!!!!!!!!!!!!!!!!
</body> 
</html> 

Попробуйте, может поможет.

Автор: TheDestroyer 15.9.2011, 02:02
Спасибо за совет, попробовал, к сожалению, не помогло.
Подскажите как правильно убрать dom body.
Я сделал так:
Код

var url=document.location;
//базовый путь
var base_url = getBaseURL();
base_url = base_url+"";
// т.к. переходы по сайту осуществляются во фрейме main_frame, необходимо менять текущий url в адресной строке
// везде нормально поддерживается, кроме ИЕ, вплоть до 9й версии, в ИЕ ссылки в адресной строке будут иметь вид
// с хэшем - текущая страница после занака #, отфильтруем его и для переходов сделаем нормальную ссылку
if (url.hash.length != 0)
{
new_url = url.hash.substr(1);
}
else
{
new_url = url.href;
}
function load_main(url)
{
pause(300);
parent.frames['main_site'].location.href = url;
} 
// проверяем, загружаемся ли во фрэйме
if ((parent.frames.length==0) && !(new_url.indexOf('video/index.php') + 1))
{ // если не во фрэйме - создаем фрэймы
//parent.location="index.htm";
if ( typeof window.JSON === 'undefined' )
{ 
document.write("<script src='themes/obereg2/js/audio_player/json2.js'><\/script>"); 
}
//<![CDATA[
if(!window.jQuery)
{document.write(unescape("<script type='text/javascript' src='themes/obereg2/js/jquery-1.4.2.min.js'>%3C/script%3E"));}
//]]>
document.write("<script src='themes/obereg2/js/audio_player/amplify.store.js'></script>");
document.write("<script src='themes/obereg2/js/audio_player/history.adapter.jquery.js'></script>");
document.write("<script src='themes/obereg2/js/audio_player/history.js'></script>");
document.write("<script src='themes/obereg2/js/audio_player/history.html4.js'></script>");

var structure = ''
  +"<frameset frameborder='0' bordercolor='black' rows='25px,*'>"
// из-за косяков ФФ и ИЕ приходится перезагружать содержимое основного фрейма через паузу,иначе его не отображают
  +"<frame name='audio_player' src='"+base_url+"themes/obereg2/audio_player.html' scrolling='no' noresize onload='load_main(new_url);'>"
  +"<frame name='main_site' src=''>"
  +"</frameset>";
document.write(structure);
} // if (parent.frames.length==0) 

function pause(ms)
{
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < ms);
}

function getBaseURL() {
    var url = location.href;  // entire url including querystring - also: window.location.href;
    var baseURL = url.substring(0, url.indexOf('/', 14));

    if (baseURL.indexOf('http://localhost') != -1) {
        // Base Url for localhost
        var url = location.href;  // window.location.href;
        var pathname = location.pathname;  // window.location.pathname;
        var index1 = url.indexOf(pathname);
        var index2 = url.indexOf("/", index1 + 1);
        var baseLocalUrl = url.substr(0, index2);

        return baseLocalUrl + "/";
    }
    else {
        // Root Url for domain name
        return baseURL + "/";
    }
}

Т.е. src главного фрейма вообще убрал, а по событию загрузки маленького фрейма с плеером - ставлю с небольшой задержкой src для основного фрейма.
Также, как видно из кода, присутствуют действия по восстановлению ссылки в адресной строке.
На данный момент у меня на локальном сервере работает везде кроме Оперы. В ней игнорируются <frameset> и все что внутри и отображается весь body что идет дальше.
Попробовал загрузить на хостинг, а там все ведет себя совершенно по другому! Казалось бы, что может случиться...
Вот в ФФ вылезают крякозябры и портится стиль, в ИЕ просто портится стиль, в хроме вроде работает. Все файлы в utf-8, крякозябрам просто неоткуда вылезать, текста-то нет, а они есть 3 символа...
Соответственно, не подскажете ли как выявить и побороть проблему после закачки на хостинг?

Автор: InfMag 15.9.2011, 11:03
TheDestroyer, вот жеж магия! Так я ещё не пойму, используете вы jQuery или нет, но всё-таки его подключаете. Я посоветую примерно так:
Код

<html>
<head>
  <title>Страница с контентом</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script type="text/javascript">
  //dom ready
  $(function () {
    if (parent.frames.length > 0) {
      return;
    }
    
    var structure = ''
      +'<frameset frameborder="1" bordercolor="maroon" rows="60px,*">'
      +'<frame name="audio_player" src="audio_player.htm" scrolling="no" noresize>'
      +'<frame name="main_site" src="'+ location +'">'
      +'</frameset>';
    
    $('body').replaceWith(structure);
  });
  </script>
<body>
  Контент страницы...
</body>
</head>
</html>

Как-то так… Пробуйте.

Добавлено через 7 минут и 33 секунды
Лично у меня не работает smile Я говорю, ставить frameset там, где уже есть body — вещь совершенно непредсказуемая.

Автор: InfMag 15.9.2011, 11:27
А вот так работает:
Код

<html>
<head>
    <title>Страница с контентом</title>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
    //dom ready
    $(function () {
        if (parent.frames.length > 0) {
            return;
        }
        
        var qs = location.search;
        qs = (qs == '') ? '?inframe=Y' : (qs + '&inframe=Y');

        var $frameset = $('<frameset></frameset>').attr({
            frameborder: 1,
            bordercolor: 'maroon',
            rows: '60px,*'
        });

        var $frameSite = $('<frame />').attr({
            name: 'main_site',
            src: location + qs
        });

        var $framePlayer = $('<frame />').attr({
            name: 'audio_player',
            src: 'audio_player.htm',
            scrolling: 'no',
            noresize: 'noresize'
        });

        $frameset.append($framePlayer);
        $frameset.append($frameSite);

        $('body').css({margin: 0, padding: 0}).html($frameset);
    });
    </script>
<body>
    Контент страницы...
</body>
</head>
</html>

Важно приставлять ?inframe=Y, поскольку эту же страницу он во фрейме открывать не хочет. Видимо защита от рекурсии.

Автор: TheDestroyer 15.9.2011, 12:19
JQuery используется в теме CMS и в библиотеке history.js, которая помогает менять url в адресной строке без перезагрузки страницы. Его стараюсь не использовать, для универсальности, вдруг тему прийдется сменить. Хотя, наверное, тут все так жестко связано, что его можно использовать.
Ваш пример более правильный, попробовал его. К сожалению, эффект почти такойже: ИЕ, ФФ и хром работают, а в опере теперь мелькает весь сайт, а потом остается только фон, а содержимого нет, режиме просмотра кода страницы видно, что html сформирован правильно - только frameset с frame. Вот что показывает в Опере:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<body onload="externalLinks();" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px">
<frameset frameborder="0" bordercolor="black" rows="25px,*">
<frame name="audio_player" src="http://172.16.3.35/themes/obereg2/audio_player.html" scrolling="no" noresize="noresize"/>
<frame name="main_site" src="http://172.16.3.35/news.php?inframe"/>
</frameset>
</body>
</html>

Как же заставить оперу работать?

Автор: InfMag 15.9.2011, 12:48
TheDestroyer, эх, эта Опера, она как всегда. Походу с ней будут проблемы, ей либо подавай body, либо frameset с самого начала как я понял. Как вариант именно для Оперы сделать редирект. На индексацию это не повлияет, поскольку редирект будет JS скриптом:
Код

<html>
<head>
    <title>Страница с контентом</title>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(function () {
        if (parent.frames.length > 0) {
            return;
        }
        
        if ($.browser.opera) {
            location = 'frameset_page.htm';
            return;
        }
        
        var qs = location.search;
        qs = (qs == '') ? '?inframe=Y' : (qs + '&inframe=Y');

        var $frameset = $('<frameset></frameset>').attr({
            frameborder: 1,
            bordercolor: 'maroon',
            rows: '60px,*'
        });

        var $frameSite = $('<frame />').attr({
            name: 'main_site',
            src: location + qs
        });

        var $framePlayer = $('<frame />').attr({
            name: 'audio_player',
            src: 'audio_player.htm',
            scrolling: 'no',
            noresize: 'noresize'
        });

        $frameset.append($framePlayer);
        $frameset.append($frameSite);
        $frameset.css({width: '100%', height: '100%'});
        $('body').remove();
        $('html').append($frameset);
    });
    </script>
</head>
<body>
    Контент страницы...
</body>
</html>


Добавлено через 3 минуты и 56 секунд
А так-то работает даже в IE6, а если в нём работает, то не работать может только в Opera)

Автор: TheDestroyer 15.9.2011, 19:22
Спасибо за пример!
Вроде все работает, даже в опере ) (тут понял, что средства отладки и разработки в опере ужасные).
Есть пара вопросов:
1. Что дает параметр ?inframe=Y ?
2. Команда  return останавливает текущий скрипт? Я вместо нее пытался как-то использовать break.

Автор: InfMag 16.9.2011, 12:30
TheDestroyer, return — останавливает функцию и возвращает значение, в нашем случае — великое ничто. Как можно заметить, я выполнял все действия внутри функции, которая запускается по готовности документа (обычная практика с jQuery), и следовательно применяя здесь return я останавливаю дальнейшее выполнение своего скрипта. А break — может остановить только цикл. Либо он используется в конструкции switch. inframe=Y ничего особенного не даёт, он лишь решает вашу проблему без обновления страницы по onload, поскольку если ссылаться во фрейме на тот же путь, по которому открыта страница с самими фреймами не получается, это защита от рекурсии, поскольку если не было бы нашего JS-скрипта, получилось бы что открывается страница с фреймами, потом внутри фрейма вновь открывается страница с фреймами и так до бесконечности. А inframe=Y как бы обманывает браузер, вместо него можно было что угодно написать, хоть ?sobaka=kuliebiaka, просто получается, что путь будет другим. Надеюсь понятно выразился.

Автор: TheDestroyer 17.9.2011, 00:06
Спасибо за разъяснение!
Все-таки есть проблема. Загрузка происходит следующим образом: сначала загружается основная страница (т.е. та, что должна быть в основном фрейме), затем она пропадает и загружается два фрейма. Получается, что очень тяжелая страница (основная) грузится два раза, что нежелательно. 
А еще это выражается в том, что в IE в режиме разработчика в отладке скриптов отображается по два одинаковых файла всех подключенный .js файлов.
Можно ли этого как-то избежать?

Автор: InfMag 17.9.2011, 15:48
TheDestroyer, сомневаюсь всеми фибрами, что возможно этого избежать. Это ведь и без того очень злодейский хак. Уже плясать и радоваться надо от того, что заработало! Но с другой стороны конечно можно попробовать следующим образом (это избавит от лишь мерцаний):
Код

<html>
<head>
    <title>Страница с контентом</title>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
    if (parent.frames.length < 1) {
        document.write('<style type="text/css">body {display: none;}</style>');
    }
    
    $(function () {
        if (parent.frames.length > 0) {
            return;
        }
        
        if ($.browser.opera) {
            location = 'frameset_page.htm';
            return;
        }
        
        var qs = location.search;
        qs = (qs == '') ? '?inframe=Y' : (qs + '&inframe=Y');
        var $frameset = $('<frameset></frameset>').attr({
            frameborder: 1,
            bordercolor: 'maroon',
            rows: '60px,*'
        });
        var $frameSite = $('<frame />').attr({
            name: 'main_site',
            src: location + qs
        });
        var $framePlayer = $('<frame />').attr({
            name: 'audio_player',
            src: 'audio_player.htm',
            scrolling: 'no',
            noresize: 'noresize'
        });
        $frameset.append($framePlayer);
        $frameset.append($frameSite);
        $frameset.css({width: '100%', height: '100%'});
        $('body').remove();
        $('html').append($frameset);
    });
    </script>
</head>
<body>
    Контент страницы...
</body>
</html>

Автор: TheDestroyer 18.9.2011, 22:08
Спасибо, да, тоже думаю, что без двойной загрузки страницы никак... Может тут кэш браузеров спасает немного, т.к. все только что загруженное снова отображается...
Второй вариант - жестко переписать структуру темы CMS, тогда то уж точно не будет лишнего грузиться.
С полной уверенностью сообщаю, что данное место - единственное в инете, где описано как сделать плеер без прерывания музыки при переходе со страницы на страницу. Можно прям в FAQ ).

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)