Многие знают о такой клёвой штуке как Яндекс.Виджет.
Сделать свой функциональный виджет проще простого, достаточно написать серверный виджет и подключить его к Яндекс.Виджет через 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