Форум

Amon · #1 (**permalink**) 08.10.2014, 18:44

Зравствуйте! Есть страница с подгузкой контента (ниже код). В Firerox все работает, а от в ИЕ и Хроме нет. Помогите пожалуйста!

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Подгрузка контента без перезагрузки страницы </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script> 
    function showContent(link) { 
        var cont = document.getElementById('content'); 
        var loading = document.getElementById('loading'); 
        cont.innerHTML = loading.innerHTML;   
        var http = createRequestObject(); 
        if( http )  
        { http.open('get', link); 
            http.onreadystatechange = function ()  
            {   if(http.readyState == 4)  
                {   cont.innerHTML = http.responseText;  }    } 
            http.send(null);  } 
        else  
        {  document.location = link;   }   } 
    // ajax объект
    function createRequestObject()  
    {  try { return new XMLHttpRequest() } 
        catch(e)  
        {  try { return new ActiveXObject('Msxml2.XMLHTTP') } 
            catch(e)  
            {   try { return new ActiveXObject('Microsoft.XMLHTTP') } 
                catch(e) { return null; }   } } } 
</script>
</head>
<body>

<h1 style="text-align:center">Подгрузка контента без перезагрузки страницы</h1>

<ul style="text-align:center">
	<li style="color:blue"><a href="#" onClick="showContent('page1.html')">Страница 1</a></li>
		<li style="color:green"><a href="#" onClick="showContent('page2.html')">Страница 2</a></li>
			<li style="color:cyan"><a href="#" onClick="showContent('page3.html')">Страница 3</a></li>
				<li style="color:red"><a href="#" onClick="showContent('page4.html')">Страница 4</a></li>
</ul>

 <br /><br />
 
<div id="content">
    <!-- CONTENT -->
</div> 
    <div id="loading" style="display: none"> 
    Идет загрузка... 
    </div> 


	
<script>
showContent('page1.html')
</script>

</body>
</html>

Erolast · #2 (**permalink**) 08.10.2014, 19:00

Зачем ты подключил jquery и не пользуешься им?
http://jquery.page2page.ru/index.php...BD%D1%8B%D1%85

danik.js · #3 (**permalink**) 08.10.2014, 19:06

Amon, XMLHttpRequest не работает на файлах. Залей страничку на вебсервер (или подними локальный) и все заработает.
Про jQuery верно подмечено.

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

<a href="#" onClick="showContent('page4.html')"

Лучше так не делать. Лучше

<a href="page4.html" onclick="return showContent(this.href), false">...</a>

А еще лучше навешать обработчик onclick из скрипта. Хочешь с jQuery, хочешь без. Если этот функционал - максимум что тебе нужно, то можешь обойтись без jQuery.

Amon · #4 (**permalink**) 08.10.2014, 19:23

Большое спасибо! Сейчас попробую закинуть на сервер.

Amon · #5 (**permalink**) 13.10.2014, 15:55

Можно еще вопрос ?! Если, например, у меня будет много статей на странице 1 и я хочу сделать боковое меню <aside> с якорными ссылками на эти статьи, то как правильно сделать ссылку, чтобы мне со страницы 2 (3,4) показало контент страницы 1 и перешло на нужную статью по якорю?

Форум

Справочник

Discord чат

Курсы javascript