basic-framed-content.html

<!--
When this is placed on a page framed by a basic-seamless-iframe element, the
two elements will cooperate to handle common cross-frame scenarios:

1: The outer basic-seamless-iframe can set and inspect the content of the
   inner basic-framed-content element.
2: The outer basic-seamless-iframe can adjust its height to exactly contain the
   inner basic-framed-content element.

The two elements communicate with postMessage, which is not supportedy by IE10.

The outer element will auto-size to be only as tall as the basic-framed-content
element, so the height of elements on the framed page outside the basic-framed-
content won't be taken into account. In order for the outer basic-seamless-
iframe to set its height correctly, the framed page hosting the basic-framed-
content instance should not have any margin, padding, or other elements outside
the basic-framed-content.

@element basic-framed-content
@demo ../packages/sample/basic-seamless-iframe/index.html
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../basic-shared/basic-shared.html">

<dom-module id="basic-framed-content">
  <template>

    <style>
    :host {
      display: block;
    }
    </style>

    <content></content>

  </template>
</dom-module>

<script>
Polymer({

  // attached: function() {
  //   // This is similar to what basic-element does to observe content changes,
  //   // but here we also want to observe attribute changes.
  //   var observer = new MutationObserver(function() {
  //     this._contentChanged();
  //   }.bind(this));
  //   observer.observe(this, {
  //     attributes: true,
  //     characterData: true,
  //     childList: true,
  //     subtree: true
  //   });
  //   if (this.childNodes.length > 0) {
  //     this._contentChanged();
  //   }
  // },

  behaviors: [Basic.ContentChanged],

  /**
   * Broadcast the element's current content to the contained page.
   *
   * @method broadcastContent
   */
  broadcastContent: function() {
    var content = Polymer.dom(this).innerHTML;
    this._postMessageToParent('framedContentResponse', content);
  },

  /**
   * Broadcast the element's current height to the contained page.
   *
   * @method broadcastHeight
   */
  broadcastHeight: function() {
    this._lastHeight = this._getHeight();
    this._postMessageToParent('framedHeightResponse', this._lastHeight);
  },

  // Our content is changed. Broadcast the new content and the height (if the
  // height changed too).
  // TODO: Add support Basic.ContentChanged to observe attribute changes in
  // children (but not attribute changes on the top-level element).
  contentChanged: function() {
    this.broadcastContent();

    // The loading of data will *not* count as a DOM mutation event, so we have
    // to explicitly listen for load events on elements that have them.
    this._listenForLoadEvents('img');
    this._listenForLoadEvents('iframe');

    // If the height changed, broadcast that too. Our own height won't be
    // available immediately; wait a tick to give the browser a chance to re-
    // render first.
    window.setTimeout(function() {
      this._checkForHeightChange();
    }.bind(this), 1);
  },

  is: 'basic-framed-content',

  ready: function() {

    window.addEventListener('WebComponentsReady', function() {
      this._postMessageToParent('framedPolymerReady'); // For backward compat
      this._postMessageToParent('framedWebComponentsReady');
    }.bind(this));

    window.addEventListener('message', function(event) {
      if (!event.data) {
        return;
      }
      switch (event.data.message) {
        case 'setContent':
          this.innerHTML = event.data.detail;
          // Promote any links to document head.
          var links = Polymer.dom(this).querySelectorAll('link');
          Array.prototype.forEach.call(links, function(link) {
            document.head.appendChild(link);
          });
          break;

        case 'requestContent':
          this.broadcastContent();
          break;

        case 'requestHeight':
          this.broadcastHeight();
          break;
      }
    }.bind(this));

  },

  _checkForHeightChange: function() {
    if (this._lastHeight !== this._getHeight()) {
      // Height changed since the last time we checked.
      this.broadcastHeight();
    }
  },

  _getHeight: function() {
    return Math.ceil(this.offsetHeight);
  },

  // The last known height of this element
  _lastHeight: null,

  // Listen for load events on children of the specified tag type.
  // TODO: Share this with basic-framed-content.
  _listenForLoadEvents: function(tag) {
    var childNodes = Basic.ContentHelpers.flattenChildNodes(this);
    Array.prototype.forEach.call(childNodes, function(child) {
      if (child.localName === tag) {
        child.addEventListener('load', function() {
          this.recalc();
        }.bind(this));
      }
    }.bind(this));
  },

  _postMessageToParent: function(message, detail) {
    var payload = {
      message: message,
      source: location.href
    };
    if (detail != null) {
      payload.detail = detail;
    }
    // TODO: For better security, set a target origin on the message. If we're
    // responding to a request, we could keep track of the origin of the request
    // and use that as the target origin for the response. This would get a bit
    // tricky for cases where we want to post a message that's not directly in
    // response to a request.
    window.parent.postMessage(payload, '*');
  }

});
</script>