sey/x-frame

Cross document communication with frame content made easy

<x-frame>

Cross document communication with frame content made easy.

Example:

<x-frame src="demo/frame.html"></x-frame>
<script>
  document.querySelector('x-frame').addEventListener('msg', function(e){
    alert(e.detail.data.message)
  });
</script>

Installation

First, make sure you have Bower and the Polymer CLI installed.

Then,

bower install
polymer serve -o

Usage

Add a <x-frame> element to your page and set the src attribute:

<!-- Main document -->

[...]

<x-frame src="frame.html" on-msg="onMessageFromFrame"><x-frame>

The target page (here frame.html) needs to contain at least one <x-framed> element to enable the cross document communication:

<!-- Frame document -->

[...]

<x-framed on-msg="onMessageFromParent"><x-framed>

The frame document can also contain more than one <x-framed> element to allow multi-channels cross document communication:

<!-- Frame document -->

[...]

<x-framed on-msg="onMessageForUsers" channel="user"><x-framed>
<x-framed on-msg="onMessageForData" channel="data"><x-framed>

This is helpful for the separation of concerns.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

History

• 1.0.0: initial release.

License

MIT license