Контент с другой страницы | JavaScript

Связь между страницами сайта реализуется с помощью

  1. iframe
  2. new XMLHttpRequest()

Получить HTML код другой страницы (другого домена)

<input type="button" value="нажать" id="raz"/>

<script>
document.getElementById('raz').addEventListener('click', function(){
  var http = new XMLHttpRequest();
  http.open('GET', 'https://developer.mozilla.org/ru/docs/Web/API/XMLHttpRequest');  // составить асинхронный (по умолчанию true) GET запрос страницы
  http.onreadystatechange = function () {  // обратная связь: отдаёт ответ на запрос
    if (this.readyState == 2) {  // в период, когда запрос уже отправлен, но полный ответ ещё не пришёл, самое время показывать иконку загрузки
      input.disabled=true;
    }
    if (this.readyState == 4 && this.status == 200) {  // отследить момент, когда пришёл полный ответ
      alert( this.responseText );  // this.responseText — ответ в виде текста
      input.disabled=false;
    }
  }
  http.send(null);  // отправить запрос
}, false); 
</script>

Другой домен должен дать доступ к странице в ответе сервера

Access-Control-Allow-Origin: http://сайт.ru
В PHP доступ прописывается строкой
<?php
header('Access-Control-Allow-Origin: http://сайт.ru');
?>

Подгрузка div из другой страницы

Взять часть содержимого (текст заголовка) с одной страницы и добавить его в блок div на другой странице:
<div id="raz1"></div>

<script>
(function(){
  var http = new XMLHttpRequest();  
  http.open('GET', '/2014/10/window-open-javascript.html');
  http.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      var doc = new DOMParser().parseFromString(this.responseText, "text/html");  // преобразовать текст в HTML
      document.getElementById('raz1').innerHTML = doc.getElementsByTagName('h1')[0].innerHTML;
    }
  }
  http.send(null);
})()
</script>

Пример: последние сообщения блога из фида Blogger

    <ol id="raz2"></ol>
    
    <script>
    (function(){
    
      function DescriptImg(z, z1) {  // функция вытягивает Description, так как в RSS-канале Blogger отсутствует данный пункт
        var http = new XMLHttpRequest();  
        http.open('GET', z);
        http.onreadystatechange = function () {
          if (this.readyState == 4 && this.status == 200) {
            var doc = new DOMParser().parseFromString(this.responseText, "text/html");
            if (doc.querySelector('meta[name="description"]').content) {
              document.querySelector('#raz2 li:nth-child('+z1+')').innerHTML += '<div>' + doc.querySelector('meta[name="description"]').content + '</div>';
            }
          }
        }
        http.send(null);
      }
    
      var http = new XMLHttpRequest();  
      http.open('GET', '/feeds/posts/default/-/feed?max-results=10');  // канал ярлыка "feed" ограничен 10 записями
      http.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          var doc = new DOMParser().parseFromString(this.responseText, "text/html"), l = doc.querySelectorAll('link[rel="alternate"][type="text/html"]');
          for (var i=1; i<l.length; i++) {
            document.getElementById('raz2').innerHTML += '<li><a href="'+l[i].href+'">'+l[i].title+'</a>';
            DescriptImg(l[i].href, [i]);
          }
        }
      }
      http.send(null);
    })()
    </script>

    Вставленный с помощью new XMLHttpRequest() контент с другой страницы не индексируется

    1. Яндекс
    2. Google
    в f t
    наверх ↑

    Комментариев нет: