Многие знают о такой клёвой штуке как Яндекс.Виджет.
Сделать свой функциональный виджет проще простого, достаточно написать серверный виджет и подключить его к Яндекс.Виджет через iframe.
Для управления виджетом Яндекс предоставляет API в виде JS объекта widget, в частности с помощью него можно изменять высоту фрейма под динамический контент (adjustIFrameHeight), это позволяет избавиться от вертикальной полосы прокрутки. Но у этого API есть существенный минус — он написан с использованием jQuery, что лишает разработчиков виджетов на MooTools использовать Widget API.
Ниже я покажу, как довольно просто можно в обход Widget API управлять высотой фрейма, используя MooTools на стороне виджета.
Как известно из содержимого фрейма нельзя получить доступ к объекту самого фрейма, если они находятся на разных доменах. Для обхода этого ограничения Widget API использует проксирующий iframe, через hash (содержимое после # в src фрейма) которого осуществляется обмен командами. В итоге нам необходимо на стороне виджета написать функционал взаимодействия с этим проксирующим iframe.
Сразу приведу весь код виджета, благо он совсем небольшой:
<script type="text/javascript" src="mootools-1.2.js"></script>
<script language="JavaScript" type="text/javascript">
var lsWidgetClass = new Class({
Implements: [Options],
options: {
// Некая добавочная величина для установки автоматической высоты фрейма
delta: 30
},
initialize: function(options){
this.setOptions(options);
this.adjustIFrameHeight();
},
// Передает команду родительскому окну фрейма виджета
cmdIFrame: function(cmd,value) {
// Удаляем старый фрейм
if ($('wd-iframe-cmd')) {
$('wd-iframe-cmd').destroy();
}
// Вытаскиваем из URL виджета идентификатор wauth, он передается автоматически Яндексом
var found=location.href.match(/wauth=.+=/ig);
if(found){
// формируем SRC с учетом домена первого уровня(ru,ua,..)
var url=new URI().getData('.').split('|');
var src=url[0]+'/xframeproxy.html#'+url[1]+'&wauth=';
// Формируем проксирующий iframe и добавляем его в HTML
src=src+found[0].replace("wauth=","").replace("&.=","")+'&name='+cmd+'&value='+value;
var iframe=new Element('iframe',{'style':'visibility: hidden; position: absolute; height: 0pt; width: 0pt; left: 0pt; top: 0pt;','src':src,'id':'wd-iframe-cmd'});
iframe.inject(document.body);
}
},
// Устанавливает заданную высоту фрейма
setIFrameHeight: function(value) {
this.cmdIFrame('Widget%3A%3AsetIFrameHeight',value);
},
// Устанавливает автоматическую высоту фрема
adjustIFrameHeight: function() {
this.setIFrameHeight($('widget-yandex').getSize().y+this.options.delta);
}
});
window.addEvent('domready', function() {
new lsWidgetClass();
});
</script>
<div id="widget-yandex">
Виджет - это информационный блок, который содержит фрагмент сайта. Все виджеты, сделанные с помощью технологии API Яндекс.Виджетов, предназначены для установки на главную страницу Яндекса.<br><br>
В кабинете разработчика вы можете загрузить свой виджет и проверить, как он работает.<br><br>
Вы можете сами распространять свой виджет, используя ссылку для его установки или промокод, которые вы можете получить на странице виджета в кабинете.
</div>
* This source code was highlighted with Source Code Highlighter.В данном примере сразу после загрузки виджета запускается метод adjustIFrameHeight(), который подгоняет высоту фрема под содержимое виджета.
Надеюсь данный топик поможет начинающим виджето-строителям, которые не ровно дышат в сторону MooTools :)
Рабочий пример MooTools виджета, использующий описанный выше принцип, можно посмотреть здесь (Викторина).
UPD Добавил механизм определения домена первого уровня, т.к. виджет не срабатывал на украинском Яндексе yandex.ua
