<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
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
History
- 1.0.0: initial release.
License
MIT license