Defines a set of custom elements similar to Pym.js for embedding remote content (graphics, visualizations, tables) into a CMS easily. The code defines two custom elements,
On the host page:
responsive-frame.jsfile to load the parent element.
Add your responsive iframes to the page using the custom element, like so:
You can also use the responsive-iframe extended element, if you want:
<iframe is="responsive-iframe" src="guest.html"></iframe>
On the guest page:
responsive-child.jsfile to load the child element behavior.
Wrap your content in a
<responsive-child>tag, or extend the body tag with its behavior using the
<body is="responsive-body"> Note: previously, we extended body elements with "responsive-child", but this has been deprecated so that we can have both extended elements and individual "responsive-child"; elements. </body>
Although it is intended for resizing frames, you can also transfer arbitrary messages between the host and guest via the
sendMessage() method present on each. Messages received on the client side will have the
message event type, and will propagate in from the
responsive-child element. On the host, the message type is
childmessage to avoid colliding with the existing
message type, and will bubble upward from the
Why use the responsive frame component instead of, for example, NPR's Pym.js?
- <responsive-frame> communicates over JSON, which means that it can pass complex objects between windows, and its protocol is easy to extend.
- No configuration needed: because the host and guest negotiate directly during startup, much of the setup for the <responsive-frame> is done for you.
About this project
These custom elements are built on The Seattle Times' component scaffolding, which makes it easy to create Web Components for IE9 and greater.