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