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

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