Связь между страницами сайта реализуется с помощью
- iframe
- 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>
Комментариев нет: