Конвертировать нормальные ссылки в Ajax динамически - PullRequest
Новая
       9

Конвертировать нормальные ссылки в Ajax динамически

1 голос
/ 29 февраля 2012

Я собрал некоторый код из разных источников, но javascript мне несколько неизвестен, и мне кажется, что я потерпел неудачу только с тем кодом, который у меня есть ..

Я хочу преобразовать каждую обычную ссылку на странице в ссылки ajax и загрузить страницы через ajax.

Пока мне удалось преобразовать ссылки только с начальной страницы и загрузить содержимое в div. Проблема в том, что у меня нет доступа к контенту, который загружается в div, а новый контент по-прежнему содержит обычные ссылки вместо ajax.

  • Есть ли способ, которым я могу преобразовывать новые ссылки внутри контента, загруженного в div, каждый раз, когда div изменяется?
  • Также, что я не знаю, так это то, что если пользователь нажимает кнопку «Домой» в меню, он загружает содержимое индекса вместе с этим сценарием, и все становится циклом. Как я могу предотвратить загрузку кода в индекс, если он загружается внутри div?
  • Если вы подозреваете, что из этого кода могут возникнуть какие-либо другие проблемы, пожалуйста, посоветуйте мне, что изменить?

Это код, который у меня есть до сих пор .. Большое спасибо за любые советы!

Вставленный в заголовок тег: 

<script type="text/javascript">
var xmlhttp;
if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }
else if(window.ActiveXObject){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
else{ }
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4)
{ document.getElementById("contentarea").innerHTML = xmlhttp.responseText; }
else{ document.getElementById("contentarea").innerHTML = ""; }
}

function loadPage(url){
document.getElementById("contentarea").innerHTML = "";
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
</script>

Вставлено где-то в теле: 

<div id="contentarea"></div>

Вставлено прямо перед концом тела: 

<script>
var oP = document.getElementsByTagName("a");
var ctr=0;
while(ctr < oP.length){
var oldHref = document.getElementsByTagName("a")[ctr].href;
document.getElementsByTagName("a")[ctr].href="javascript:loadPage('"+oldHref+"');";
ctr++;
}
</script>

1 Ответ

0 голосов
/ 29 февраля 2012

здесь ja go .. подобрал это для вас .. вы можете использовать document.links, чтобы получить все якорные теги. Я делаю это только на 'contentArea'. Все внутри (function () {будет вызываться только тогда, когда документ будет готов. Затем в событии onreadystatechange я снова вызываю функцию, чтобы установить событие click для любых якорей, которые возвращаются в resposne. 

<script type="text/javascript">
var xmlhttp;

function loadPage(url){
document.getElementById("contentarea").innerHTML = "";
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

var parseAnchors = function(){
    var anchors = document.getElementById("contentarea").links; // your anchor collection
    var i = anchors.length;
    while (i--) {
      var anchor = anchors[i];
        anchor.onclick = (function(url) {
          return function() {
            loadPage(url);
            return false;
          };
        })(anchors[i].href);
        anchor.href = "#";
    }
  };

(function () {

if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }
   else if(window.ActiveXObject){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
   else{ }
   xmlhttp.onreadystatechange=function(){
   if(xmlhttp.readyState==4)
   { document.getElementById("contentarea").innerHTML = xmlhttp.responseText; }
   else{ document.getElementById("contentarea").innerHTML = ""; }
   parseAnchors();
 }

window.onload = function () {
 parseAnchors();
}
</script>
...