Original Post from Web Media House:
Embed iFrames responsively
Pym.js embeds and resizes an iframe responsively (width and height) within its parent container. It also bypasses the usual cross-domain issues.
Using iframes in a responsive page can be frustrating. It’s easy enough to make an iframe’s width span 100% of its container, but sizing its height is tricky — especially if the content of the iframe changes height depending on page width (for example, because of text wrapping or media queries) or events within the iframe.
---
How it works:
The Pym.js library and a small bit of JavaScript are injected onto the parent page. This code writes an iframe to the page in a container of your choice. The request for the iframe’s contents includes querystring parameters for the initialWidth and childId of the child page. The initialWidth allows the child to know its size immediately on load, because in iOS, the child frame can not determine its own width accurately. The childId allows multiple children to be embedded on the same page, each with its own communication to the parent.
The child page also includes Pym.js and its own JavaScript. It initializes cross-iframe communication to the parent, renders any dynamic content and then sends the computed height of the child to the parent via postMessage. Upon receiving this message the parent resizes the containing iframe, thus ensuring the contents of the child are always visible.
The parent page also registers for resize events. Any time one is received, the parent sends the new container width to each child via postMessage. The child re-renders its content and sends back the new height.
---
Pym.js has been tested in:
* Chrome 32 (Mac 10.9)
* Firefox 26 (Mac 10.9)
* Internet Explorer 9, 10 (Windows 7), 11 (Windows 8)
* Safari 7 (Mac 10.9)
* iOS 7 Safari
* iOS 7 Chrome
* Android 4.4 Chrome
Internet Explorer versions earlier than 9 are not supported.
---
Examples:
http://ift.tt/1lgsQtr
GitHub / Download:
http://ift.tt/1jfsxrX
License:
The MIT License (MIT)
http://ift.tt/j1ALGl
http://ift.tt/1jfszjn
from Public RSS-Feed of Jeffery yuan. Created with the PIXELMECHANICS 'GPlusRSS-Webtool' at http://gplusrss.com http://ift.tt/1lgsRxq
via LifeLong Community
No comments:
Post a Comment