nprapps/pym.js

Resize an iframe responsively depending on the height of its content and the width of its container.

pym.js's Issues

Handle iframes created by external javascript

Hi,

The way I understand Pym from looking at its documentation, it currently needs a child HTML URL as a parameter of pym.Parent. What about iframes created by inserting a piece of 3rd-party javascript, is this going to be within the scope of your library? It sounds like a lot of extra work to create chunks of HTML in the CMS to host just the javascript embeds to be inserted in actual entries.

For context about my use case, I'm looking for something akin to FitVids or Fluidvids to make Tableau embeds responsive.

Make it a Bower package

http://bower.io/#defining-a-package

Test on totally different domains (like a Github Pages example embedded on Tumblr?)

Write up Core Publisher workaround docs / blog post

https://twitter.com/ejimbo_com/status/539911428681916416

Create a nice documentation homepage

Probably Github pages

Make it an AMD module so it works with require.js

http://requirejs.org/docs/whyamd.html#definition

Ask npr/responsiveiframe to link to us

We've pretty fair surpassed them in terms of features

autoinit: browser testing

Refactor into a single module

Two modules was a nice idea, but since they are small and both rely on jQuery we can simplify this.

"autoinit" feature

My use-case for pym.js is similar to the motivating example in the project website (embedding an iframe in a CMS document), but I have an additional restriction: the CMS actively scrubs in-line JavaScript. I would like to instruct pym.js to automatically instantiate a parent connection on iframes that opt-in to the functionality. For instance:

<!-- opt in to the "auto initialization" functionality with an HTML5 `data-` attribute -->
<script src="pym.js" data-pym-autoinit="autoinit-target-class"></script>

<div class="autoinit-target-class" data-pym-src="http://example.com/some/child.html"></div>
<!-- optionally specify an `domain` regex: -->
<div class="autoinit-target-class" data-pym-src="http://example.com/some/child.html" data-pym-xdomain="\.npr\.org"></div>

I would be happy to draw up a draft implementation (I'm actively pursuing this in a fork), but I'm interested in gauging interest from the maintainers before submitting a pull request. What do you think?

IE11 compatibility

Since upgrading to the latest version of Pym, we've been getting reports that it's not resizing on load from IE11 users. We haven't been able to reproduce it just yet, but I'm wondering if anyone else has seen this issue.

Verify that polling still works.

Docs: W/ "assumptions" section, also list out where this is NOT an appropriate solution

Update examples to use refactored iframe code

Make sure we have a demo showing 2+ iframes on one page

To show it's possible and as a test case

Edit README to point to the fancy new docs

Verify that polling still works

hash in child_url breaks the params

If I need to load the frame as frame.html#foo, the iframe src will be frame.html#foo?initialWidth=970&childId=frame, it should be frame.html?initialWidth=970&childId=frame#foo

Documentation for custom event binding

Backport fix for child urls with querystrings from `musicgame`

Parent.off() and Child.off()

Should be able to unbind custom events

Write Source post

Allow child to redirect parent to a new url

Clever idea from:

https://github.com/GuardianInteractive/iframe-messenger/blob/master/src/iframeMessenger.js#L44

Browser testing

Make sure everything still works the way we expect in all the browsers we support.

Allow child to scroll parent

Another clever idea from:

https://github.com/GuardianInteractive/iframe-messenger/blob/master/src/iframeMessenger.js#L221

Eliminate dependency on jQuery

We really don't use it for much, we shouldn't need to rely on it.

autoinit: documentation

Multiple responsive iframes not getting height value till resize

I'm using pym.js to display multiple iframes on a single page, each iframe is contained on a different tab of a javascript tab table (http://publicsource.org/pittsburgh-crime-statistics-2010-2013).

I'm running into issues on Firefox and Internet Explorer where the iframes on tabs 2 and 3 are not receiving a height until the iframe page is manually resized. Not working at all on Internet Explorer.

I'm pretty sure the issues is with how/where I'm calling the pym.js, but I was hoping you could give me a bit of help on this. Using Drupal 7.

Best,
A

Kill console.log() statements

See: nprapps/dailygraphics#41

Use JSON to pass messages instead of plaintext?

In attempting to utilize Pym with another library, I encountered a situation in which the other library was listening to message events, expecting JSON, and blindly passing the message through JSON.parse(). This 3rd-party would be better served by filtering messages from domains that it cared about instead of everybody and their siblings, and I've filed a bug with that author appropriately.

However, it made me aware of the message format that Pym was using for communication: responsive(parent|child) [id] [height]. Have you considered using JSON instead? This would have the advantage of utilizing JSON.parse() instead of regex parsing and make the communication a little more readable. Just a thought, and I'm happy to send a PR.

Proper API docs

This thing is big enough now it needs real API docs

Child needs to be able to tell the parent that the height has updated

sendHeightToParent() no longer works

If the container div ID has a dash in it, the rig breaks

See 2f9affc

@jeremyjbowers blames regex. Looking into using a different delimiter.

Scrollbar quirk in OS X: Inaccurate width calculated on initial load

Found an interesting quirk re: scrollbars in OS X and calculating browser width.

If the content on the page is super-short before the iframe loads (and therefore the page has no scrollbar initially), and you have one of these OS X scrollbar settings set:

Pym will calculate the width of the browser and without taking into account the width of the scrollbar. So, on initial load, a graphic might be drawn about 15px too wide (but will fix itself onresize).

To replicate, on a Mac, go to System Preferences > General and try one of the two settings above. Then test this URL:

http://apps.npr.org/dailygraphics/graphics/salt-yeast-alcohol-alastair/

When it's misbehaving, the "4" at the end of the x-axis gets cut off / does not appear.

Noted in OS X 10.9.3 in Chrome and Firefox. (Didn't check Safari.)

(Thanks to @dannydb for helping to identify what was causing the problem.)

Shouldn't use HTML tags to select iframe containers

Because that means they all have to be on the page when I run it. And if I run it again now I've initialized them twice. I don't think I would care about this if it was just for us, but a library should be more flexible.

Suggested pattern:

window.responsiveParent('#embed1', {});
window.responsiveParent('#embed2', {});

Does it need a new name?

responsiveIframe is kind of lame, right?

What can we learn from Guardian's iframe-messenger?

https://github.com/GuardianInteractive/iframe-messenger

They have a cleaner API for one thing.

Link clicking inside <iframe>, explicitly setting child id

I have an <iframe> where normal click-the-link navigation and post-the-form page loading is possible. The child JavaScript re-initializes the Pym messaging on window.load after the page has been reloaded. I am not sure if this is a very common use case or should it have worked out of the box.

The site: http://libertymusicstore.net/

I had to make some changes to Pym to make this work, so that the page inside the iframe can message the parent after clicking the link. Link becomes <iframe src> and because this src doesn't contain Pym-specific query parameters given on the initial Pym embed when parent creates the iframe, the id token needed for postMessage() communication is lost.

When the child in initialized it explicitly gives the id in JavaScript:

/**
* Handle <iframe> embed and signalling with the parent frame.
*/
function initEmbed() {
    pymChild = new pym.Child({id: "store-embed-iframe-wrapper"});

    $(window).load(function() {      
        pymChild.sendHeightToParent();
    });
}

And then Pym can pick this id up from from the settings, instead of link URL

    // Identify what ID the parent knows this child as.
    // Also accept id from the child contruction parameters,
    // so that you can keep sending message to the parent with specific
    // after iframe page loads
    this.id = this.getParameterByName('childId') || this.settings.id; 

If you are interested in pull request, I can create one, now the code lives only here:

https://github.com/miohtama/LibertyMusicStore/blob/master/tatianastore/static/pym.js#L230

body with height: 100% doesn't work with sendHeight()

Child documents which have height: 100% set on their body (which many .css reset libraries do), accessing the document height with:

 document.getElementsByTagName('body')[0].offsetHeight.toString();

will return the initial height of the iframe regardless of additional calls to sendHeight().

A more robust height calculation might be:

var body = document.body,
  html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight,
          html.clientHeight, html.scrollHeight, html.offsetHeight );

as referenced here: http://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript.

I'm not sure that this would cause an issue to existing height calculations, but I'd be happy to go ahead and create a pull request if you guys think that this approach is good.

Can you store a minified version of pym.js in the repo?

Would you like a grunt file to ugilyfy pym.js?

Consider registering with TravisCI to run `grunt` tasks automatically?

Did this for another project (jpfuentes2/php-activerecord#282), happy to do the same for this one. Thanks!

Document using multiple iframes on one page

Jump/anchor links within the iframe don't work on iOS

Use case: A table with information specific to each state — something like this early voting project from 2012:

And, when the table is iframed in, it makes total sense that it wouldn't work. But maybe it's not terribly painful to figure out? Initial thought: Get the y-position of the iframe on the parent page and the y-position of the anchor on the child page, and then jump to (iframe-y + anchor-y) on the parent page.

Readme: Rewrite "How It Works"

https://github.com/nprapps/responsiveiframe#how-it-works

renderCallback arguments

The README might want to specify that renderCallback is passed the new width of the parent. Sort of obvious, but had to go through source to verify.

This is a life changer.

sendMessage documentation is inaccurate

Specifically, this line:

pymParent.sendMessageToChild('navigate', e.target.href);

Looks like we need to update to reflect the pymParent.sendMessage() in the current release and maybe also provide an example using pymChild.sendMessage().

Verify that filtering incoming message domains still works

from README:

• You can optionally pass in a regex to filter incoming message domains: $('iframe').responsiveIframe({ xdomain: '*\.npr\.org' });.

Capture status from the child page inside iframe

Hello,

I am trying to capture error status from a child page that I am loading from pym. When the child page detects invalid user, it will return status 401 on the header and I want to be able to get that status and redirect the user to the parent site's login page.

How can I get this status code from the child page?

Thanks,
Suriyanto

What can we learn from FitFrame.js?

https://github.com/benfoster/FitFrame.js

May not be anything here, but worth a code review.

Example of custom event binding