JavaScript. Подробное руководство, 6-е издание
Шрифт:
else
window.attachEvent("onmessage", handleMessage); // Для IE8
function handleMessage(e) {
// Нас не волнует происхождение документа, отправившего сообщение:
// мы готовы выполнить поиск на сайте Twitter для любой страницы.
// Однако сообщение должно поступить от окна, вмещающего этот модуль,
if (е.source !== window.parent) return;
var searchterm = e.data; //
Это фраза, которую требуется отыскать
// С помощью утилит поддержки Ajax из библиотеки jQuery и прикладного
// интерфейса Twitter отыскать сообщения, соответствующие фразе.
jQuery.getJS0N(" http://search.twitter.com/search.json?callback= ?",
{ q: searchterm },
function(data) { // Вызывается с результатами запроса
var tweets = data.results;
// Создать HTML-документ для отображения результатов
var escaped = searchterm.replace("<", "<”);
var html = "<h2>" + escaped + "</h2>";
if (tweets.length == 0) {
html += "No tweets found";
}
else {
html += "<dl>"; // <dl> list of
results
for(var і = 0; і < tweets.length; i++) {
var tweet = tweets[i];
var text = tweet.text;
var from = tweet.from_user;
var tweeturl = " http://twitter.eom/#!/ " + from +
"/status/" + tweet.id_str;
html += "<dt><a target='_blank‘ href="#"text_code"> tweeturl + "'>" + tweet.from_user +
"</a></dt><dd>" + tweet.text + "</dd>";
}
html += "</dl>";
}
// Вставить документ в <iframe>
document.body.innerHTML = html;
});
}
$(function {
//
Сообщить вмещающему документу, что модуль готов к поиску. Вмещающий документ
// не может отправлять модулю сообщения до получения этого сообщения, потому что
// модуль еще не готов принимать сообщения. Вмещающий документ может просто
// дождаться события onload, чтобы определить момент, кода будут загружены
// все фреймы. Но мы предусматриваем отправку этого сообщения, чтобы известить
// вмещающий документ, что можно начать выполнять поиск еще до получения
// события onload. Модулю неизвестно происхождение вмещающего документа,
// поэтому мы используем *, чтобы броузер доставил сообщение любому документу,
window.parent.postMessage("Twitter Search v0.1", "*");
});
</script>
</head>
<body>
</body>
</html>
В примере 22.5 представлен простой сценарий на языке JavaScript, который может быть вставлен в любую веб-страницу, где требуется использовать модуль поиска по сайту Twitter. Он вставляет модуль в документ и затем устанавливает обработчики событий во все ссылки в документе, чтобы при наведении указателя мыши на ссылку производился вызов метода
postMessage
модуля, заставляющий его выполнить поиск по строке URL ссылки. Это позволит узнать, что говорят люди о веб-сайте перед тем, как перейти к нему. Пример 22.5. Использование модуля поиска по сайту Twitter с помощью метода postMessage
// Этот сценарий JS вставляет Twitter Search Gadget в документ и добавляет обработчик
// событий ко всем ссылкам в документе, чтобы при наведении указателя мыши на них
// с помощью модуля поиска отыскать упоминания URL-адресов в ссылках.
// Это позволяет узнать, что говорят другие о сайтах, прежде чем щелкнуть на ссылке,
window.addEventListener("load", function { // He работает в IE < 9
var origin = " http://davidflanagan.com ”; // Происхождение модуля
var gadget = "/demos/TwitterSearch.html"; // Путь к модулю
var ifгате = document.createElement("ifгате"); // Создать iframe
Поделиться с друзьями: