Контент с другой страницы | 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