Чем заменить фрейм?

@Columb · Регистрация: 12.11.2009

Доброго времени суток всем.
Вот понемногу "собираю" сайт(так сказать, учусь). И появилась такая непростая задача:
- есть "шапка" у страницы;
- сбоку менюшка.
Как сделать так, чтобы при переходе по меню, менялась не вся страница, а только там, где надо менять текст, т.е. определьный блок, похоже на фрейм, но немножко не то.
и что бы он мог прокручиаться до конца страницы общим скролингом, а не месным как это делает фрейм... Может немного не неправильно выразился, прошу прощения, я только начинаю "этим заниматься".

@GalaX · 14.11.2009, 06:23

ajax тебе поможет

@tyz · 14.11.2009, 12:31

я думаю PHP в этом вопросе лучщий помощник, недостаток в php хостинге...

Добавлено через 2 минуты

Сообщение от GаlаX

ajax тебе поможет

тоже не плох!!!

Humanoid · 14.11.2009, 13:22

Даже PHP не нужен.

HTML5

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
 
function PageRecive(s)
{
    document.getElementById('text').innerHTML=s;
}
 
var xmlHttp=false;
function AjaxCreate()
{
    if (xmlHttp) return true;
    /* Сначала попробуем создать XMLHttpRequest для голимого и глючного Internet Explorer */
    /*@cc_on @*/
    /*@if (@_jscript_version >= 5)
    try {
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e2) {
            xmlHttp = false;
        }
    }
    @end @*/
    /* А теперь, если у нас нормальный браузер, то создаём всё по-нормальному */
    if (!xmlHttp && typeof XMLHttpRequest != 'undefined')
        xmlHttp = new XMLHttpRequest();
    if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
        d.write('<div style="font-size: 16pt; color: black;">Не удалось создать объект для работы с Ajax. Возможно, в вашем браузере выключен JavaScript или вы пользуетесь фиговым браузером. Рекомендую установить <b>Mozilla Firefox</b> или <b>Opera</b></div>');
        xmlHttp=false;
        return false;
    }
    return true;
}
 
function AjaxGet(url,callback)
{
    function UpdatePage()
    {
        if (xmlHttp.readyState==4) {
            callback(xmlHttp.responseText);
        }
    }
    if (!xmlHttp) AjaxCreate();
    xmlHttp.open('GET',url,true);
    xmlHttp.onreadystatechange=UpdatePage;
    xmlHttp.send(null);
}
 
</script>
</head>
<body>
<table><tr><td>
<a href="#" onclick="AjaxGet('page1.html',PageRecive); return false;">Меню 1</a><br />
<a href="#" onclick="AjaxGet('page2.html',PageRecive); return false;">Меню 2</a><br />
<a href="#" onclick="AjaxGet('page3.html',PageRecive); return false;">Меню 3</a><br />
</td><td>
<div id="text">Тут будет содержимое подгружаемых страниц</div>
</td></tr></table>
</body>
</html>

При нажатии на разные меню, внутрь тега <div id="text"> будут загружаться страницы page1.html и т.п.

@Columb · 14.11.2009, 15:49 **[ТС]**

Всем откликнувшимся большое спасибо, особенно Humanoid.
И еще вопросик, при таком скрипте, будет грузиться только текст, но и может еще и картинки?
И где можно почитать по подробнее про ajax?

Humanoid · 14.11.2009, 16:46

Сообщение от Columb

И еще вопросик, при таком скрипте, будет грузиться только текст, но и может еще и картинки?

Если в этом тексте, который ты подгружаешь будут теги <img>, то и картинки загрузятся.

Сообщение от Columb

И где можно почитать по подробнее про ajax?

Кажется, я отсюда узнал.

@romchiksoad · 14.11.2009, 20:34

спасибо,распечатал))очень полезный сайтик)буду туда наведываться))

28.07.2010, 00:09

Здравствуйте. Очень помог ваш пост. Спасибо! У меня вопрос. Как сделать так, что бы не только главное меню так подгружало страницы? Т.е. например, Главная ---Интернет-магазин
---аудио
---видео
---диски
нажимаешь на "аудио" и разделы страницы так же подгружаются. А с разделов дальше...
В общем, как сделать так, что бы

HTML5

1	<a href="#" onclick="AjaxGet('page1.html',PageRecive); return false;">Меню 1</a><br />

прописалось автоматически для каждой новой или уже существующей ссылки? Примерно так. Не могу объяснить по-другому. Простите. Можете посмотреть [ссылка удалена] и поймёте, что я хочу. Это НЕ спам! Мне от этих посещений ни холодно ни жарко. Спасибо

@Аиас · 13.02.2011, 17:53

А как сделать чтобы вместо "Тут будет содержимое подгружаемых страниц" загружалась нужная страница по умолчанию?

Добавлено через 24 минуты
Так, я уже разобрался, сделал вот так: <body onload="AjaxGet() ..........................

@4umYOUser · 13.02.2011, 18:14

Народ, Joomla решает эту задачу. Кроме того, что вы делаете только один файл-шаблон и при переходе по ссылкам меню меняется или одно или сколько нужно модулей вы имеете еще массу преимуществ. В частности, возможность подключения множества эффектов, а если сайт будет для заказчика, то он сможет сам редактировать тексты на страницах и добавлять/удалять изображения через визуальный редактор подобно набору текста в обычном ворде.

@polyaKIDze · 28.09.2013, 14:54

Humanoid, подскажите пожалуйста, как решить мою проблему.
Я воспользовался вашим скриптом, body onload грузит в index страничку приветствия. На новостной страничке (тоже подгружаемой) можно добавить пост с помощью php, но после выполнения php я хочу вернуться назад и чтобы была подгружена новостная страничка, а не страница приветствия.
Не могу ничего придумать лучше чем,

PHP

1	header("location: ".$_SERVER['HTTP_REFERER']);

Это вернет меня в index с подгруженной страничкой приветствия, а нужна новостная страница.

Humanoid · 28.09.2013, 18:45

polyaKIDze, я тут вижу два пути:
1) (и на мой взгляд наиболее подходящий) можно использовать такой же ajax, но с post запросами. Тогда при добавлении сообщения (или что там делает пользователь) у него вообще не будет меняться страница. Я бы посоветовал использовать jQuery для этого... тот скрипт из 4 сообщения я привёл когда ещё сам не был знаком с более удобным и отлаженным jQuery. Там это будет что-то вроде:

Javascript

$.post('/addmessage.php',
  {
    nom: 123,
    msg: 'Ляляля',
  })

Этот javascript сделает тоже самое, что и отправка из формы:

HTML5

<form action="/addmessage.php" method="post">
<input type="text" name="nom"/>
<input type="text" name="msg"/>
<input type="submit"/>
</form>

Разница будет только в том, что в случае с javascript страница не будет обновляться... для пользователя ничего заметного не произойдёт. Надо будет только так же через javascript дать пользователю понять, что его команда была выполнена.

2) Можно возвращаться не просто на

PHP

1	header("location: ".$_SERVER['HTTP_REFERER']);

а на какой-нибудь

PHP

1	header("location: ".$_SERVER['HTTP_REFERER']."?page=news");

А при загрузке уже проверять, чему равен $_GET['page']... и если он равен 'news', то сразу подгружать новостную страничку.

@polyaKIDze · 28.09.2013, 19:57

Humanoid, спасибо вам большое.
Я все же воспользовался вторым вариантом, т.к. js я знаю чуть меньше, чем никак. Стыдно, что сам не додумался до такого решения. Конечно подгрузка видна, но поначалу пойдет.
Первый вариант тоже попробовал, но что-то даже так не сработало:

HTML5

<!-- index.html -->
<script>
    $.post('addnews.php',
    {
        themeOfNews: '12.12.12',
        textOfNews: 'Ляляля',
    });
</script>

PHP

//addnews.php
<?php
    if (isset($_POST['textOfNews'])) { 
        $text = "<em><p>".$_POST['textOfNews']."</p></em>";
    }
    if (isset($_POST['themeOfNews'])) { 
        $theme = "<p align=\"center\"><big><strong>".$_POST['themeOfNews']."</strong></big></p>";
    }
    if (($text != '') and ($theme != '')) {
        $file = fopen("new.txt", "rt");
        $old = fread($file, filesize("new.txt"));
        fclose($file);
        $file = fopen("new.txt", "wt");
        fwrite($file, $theme."\n".$text."\n".$old);
        fclose($file);
    }
?>

Видать, чего-то важного я не знаю.

Humanoid · 30.09.2013, 09:36

Сообщение от polyaKIDze

Первый вариант тоже попробовал, но что-то даже так не сработало:

Надо вначале сам jQuery подгрузить... например

HTML5

1	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

@AlexHelmsman · 20.10.2014, 09:30

Я, конечно, понимаю, что Вы это писали уже давно. Но все же. я только начинаю осваивать javascript и не всегда могу сообразить в чем проблема при невыполнении тех или иных инструкций. Код, предложенный Вами, меня очень заинтересовал. Однако, в Хроме он почему-то не выполняется:

XMLHttpRequest cannot load page1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. VM183 AJAX.html:52AjaxGet VM183 AJAX.html:52onclick VM184 AJAX.html:59
Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load
page1.html'. VM183 AJAX.html:52AjaxGet VM183 AJAX.html:52onclick

Дополнительный вопрос: При таком подходе, можно сразу выйти на страницу page1, набрав в адресной строке www.сайт.ru/page1.html ? и будет ли в таком случае загружено меню? А при переходе по ссылке "меню 1" адресная строка браузера никак не изменится и останется "сайт.ру" ?
Заранее извиняюсь за дилетантские вопросы.

Добавлено через 15 минут
Humanoid, и как передать в эту функцию id элемента? Если у меня такиъ элементов "text" на странице несколько "text1", "text2",... ???

@kristinka707 · 11.02.2015, 21:02

HTML5

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
 
function PageRecive(s)
{
    document.getElementById('text').innerHTML=s;
}
 
var xmlHttp=false;
function AjaxCreate()
{
    if (xmlHttp) return true;
    /* Сначала попробуем создать XMLHttpRequest для голимого и глючного Internet Explorer */
    /*@cc_on @*/
    /*@if (@_jscript_version >= 5)
    try {
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e2) {
            xmlHttp = false;
        }
    }
    @end @*/
    /* А теперь, если у нас нормальный браузер, то создаём всё по-нормальному */
    if (!xmlHttp && typeof XMLHttpRequest != 'undefined')
        xmlHttp = new XMLHttpRequest();
    if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
        d.write('<div style="font-size: 16pt; color: black;">Не удалось создать объект для работы с Ajax. Возможно, в вашем браузере выключен JavaScript или вы пользуетесь фиговым браузером. Рекомендую установить <b>Mozilla Firefox</b> или <b>Opera</b></div>');
        xmlHttp=false;
        return false;
    }
    return true;
}
 
function AjaxGet(url,callback)
{
    function UpdatePage()
    {
        if (xmlHttp.readyState==4) {
            callback(xmlHttp.responseText);
        }
    }
    if (!xmlHttp) AjaxCreate();
    xmlHttp.open('GET',url,true);
    xmlHttp.onreadystatechange=UpdatePage;
    xmlHttp.send(null);
}
 
</script>
</head>
<body>
<table><tr><td>
<a href="#" onclick="AjaxGet('page1.html',PageRecive); return false;">Меню 1</a><br />
<a href="#" onclick="AjaxGet('page2.html',PageRecive); return false;">Меню 2</a><br />
<a href="#" onclick="AjaxGet('page3.html',PageRecive); return false;">Меню 3</a><br />
</td><td>
<div id="text">Тут будет содержимое подгружаемых страниц</div>
</td></tr></table>
</body>
</html>

Почему то у меня не работает этот код, сделала файл index.html c кодом что выше, рядом положила три файла page1.html , page2.html , page3.html ...... для примера сделала все эти три страницы с разными цветами фона, по идее при нажатии на ссылки на странице должны появляться все эти три цвета...Но ничего не происходит. Помогите плиз.

@Kimono1983 · 17.12.2015, 20:59

2kristinka707
Там по видимому есть зависимости от чегото) Ну к примеру если в page1 сделать краснй квадрат в теге wrapper, то перейдя по ссылке Меню1 - красный квадрат по явится, но содержимое в index сместится от левого и верхнего края(у меня гдето по 100пксл), если wrapper придать float-left, то смещение в index происходит только от левого края на величину около 100пкс.
Если на странице index, wrapper заменить дивом с класом которому задать ширину и высоту, то все получается нормально.

А мне больше интересно, если на подгружаемой странице в коде нет headera и прочего будет ли эта страница "достойно" индексироваться поисковиками?

@АрсенийВЛГ · 26.04.2018, 16:12

У меня такая же проблема была. Поставил все на хостинг, заработало.

@Columb 252 / 8 / 0 Регистрация: 12.11.2009 Сообщений: 170
		1
	Чем заменить фрейм? 14.11.2009, 05:11. Просмотров 18016. Ответов 17 Метки нет (Все метки) Доброго времени суток всем. Вот понемногу "собираю" сайт(так сказать, учусь). И появилась такая непростая задача: - есть "шапка" у страницы; - сбоку менюшка. Как сделать так, чтобы при переходе по меню, менялась не вся страница, а только там, где надо менять текст, т.е. определьный блок, похоже на фрейм, но немножко не то. и что бы он мог прокручиаться до конца страницы общим скролингом, а не месным как это делает фрейм... Может немного не неправильно выразился, прошу прощения, я только начинаю "этим заниматься". 0

@GalaX 701 / 572 / 59 Регистрация: 18.11.2008 Сообщений: 2,147
	14.11.2009, 06:23	2
	ajax тебе поможет 0

@tyz 356 / 314 / 48 Регистрация: 21.04.2009 Сообщений: 574
	14.11.2009, 12:31	3
	я думаю PHP в этом вопросе лучщий помощник, недостаток в php хостинге... Добавлено через 2 минуты Сообщение от GаlаX ajax тебе поможет тоже не плох!!! 0

@Columb 252 / 8 / 0 Регистрация: 12.11.2009 Сообщений: 170
	14.11.2009, 15:49 [ТС]	5
	Всем откликнувшимся большое спасибо, особенно Humanoid. И еще вопросик, при таком скрипте, будет грузиться только текст, но и может еще и картинки? И где можно почитать по подробнее про ajax? 0

Humanoid Почетный модератор 11165 / 4124 / 410 Регистрация: 12.06.2008 Сообщений: 11,942
	14.11.2009, 16:46	6
	Сообщение от Columb И еще вопросик, при таком скрипте, будет грузиться только текст, но и может еще и картинки? Если в этом тексте, который ты подгружаешь будут теги <img>, то и картинки загрузятся. Сообщение от Columb И где можно почитать по подробнее про ajax? Кажется, я отсюда узнал. 2

@romchiksoad 1953 / 792 / 89 Регистрация: 03.11.2009 Сообщений: 3,066 Записей в блоге: 2
	14.11.2009, 20:34	7
	спасибо,распечатал))очень полезный сайтик)буду туда наведываться)) 0

@Аиас 17 / 17 / 5 Регистрация: 13.02.2011 Сообщений: 107
	13.02.2011, 17:53	9
	А как сделать чтобы вместо "Тут будет содержимое подгружаемых страниц" загружалась нужная страница по умолчанию? Добавлено через 24 минуты Так, я уже разобрался, сделал вот так: <body onload="AjaxGet() .......................... 0

@4umYOUser 28 / 28 / 4 Регистрация: 18.05.2010 Сообщений: 266
	13.02.2011, 18:14	10
	Народ, Joomla решает эту задачу. Кроме того, что вы делаете только один файл-шаблон и при переходе по ссылкам меню меняется или одно или сколько нужно модулей вы имеете еще массу преимуществ. В частности, возможность подключения множества эффектов, а если сайт будет для заказчика, то он сможет сам редактировать тексты на страницах и добавлять/удалять изображения через визуальный редактор подобно набору текста в обычном ворде. 0

@AlexHelmsman 0 / 0 / 0 Регистрация: 20.10.2014 Сообщений: 1
	20.10.2014, 09:30	15
	Я, конечно, понимаю, что Вы это писали уже давно. Но все же. я только начинаю осваивать javascript и не всегда могу сообразить в чем проблема при невыполнении тех или иных инструкций. Код, предложенный Вами, меня очень заинтересовал. Однако, в Хроме он почему-то не выполняется: XMLHttpRequest cannot load page1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. VM183 AJAX.html:52AjaxGet VM183 AJAX.html:52onclick VM184 AJAX.html:59 Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load page1.html'. VM183 AJAX.html:52AjaxGet VM183 AJAX.html:52onclick Дополнительный вопрос: При таком подходе, можно сразу выйти на страницу page1, набрав в адресной строке www.сайт.ru/page1.html ? и будет ли в таком случае загружено меню? А при переходе по ссылке "меню 1" адресная строка браузера никак не изменится и останется "сайт.ру" ? Заранее извиняюсь за дилетантские вопросы. Добавлено через 15 минут Humanoid, и как передать в эту функцию id элемента? Если у меня такиъ элементов "text" на странице несколько "text1", "text2",... ??? 0

@Kimono1983 0 / 0 / 0 Регистрация: 17.12.2015 Сообщений: 1
	17.12.2015, 20:59	17
	2kristinka707 Там по видимому есть зависимости от чегото) Ну к примеру если в page1 сделать краснй квадрат в теге wrapper, то перейдя по ссылке Меню1 - красный квадрат по явится, но содержимое в index сместится от левого и верхнего края(у меня гдето по 100пксл), если wrapper придать float-left, то смещение в index происходит только от левого края на величину около 100пкс. Если на странице index, wrapper заменить дивом с класом которому задать ширину и высоту, то все получается нормально. А мне больше интересно, если на подгружаемой странице в коде нет headera и прочего будет ли эта страница "достойно" индексироваться поисковиками? 0

@АрсенийВЛГ 0 / 0 / 0 Регистрация: 07.06.2015 Сообщений: 7
	26.04.2018, 16:12	18
	У меня такая же проблема была. Поставил все на хостинг, заработало. 0

Чем заменить фрейм?

Решение