Документация

Использование MooTools

В разделе приведен пример, в котором показано, как управлять элементом <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>: Туристическая викторина.

Примечание. 

Обсуждение использования библиотеки MooTools для виджетов Яндекса на сайте habrahabr.ru и в клубе Яндекс.Виджеты.

Яндекс.Виджеты MooTools