В разделе приведен пример, в котором показано, как управлять элементом <iframe> средствами библиотеки MooTools на стороне виджета.
Из содержимого виджета нельзя получить доступ к объекту самого элемента <iframe>, если они находятся на разных доменах. Для обхода этого ограничения WidgetAPI.js использует проксирующий <iframe>, через hash (содержимое после # в src фрейма) которого осуществляется обмен командами. При использовании MooTools необходимо на стороне виджета написать функционал взаимодействия с проксирующим <iframe>.
Код виджета с использованием библиотеки MooTools:
<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>
Пример виджета, использующего MooTools и описанный принцип взаимодействия с элементом <iframe>: Туристическая викторина.