Support for multiple responsive iframes on one page.

[sarahgoldman]

I closed my original pull request (#20) and am submitting this one because I fixed the navigating to new pages within frame issue I mentioned in the original pull request.

Now instead of passing the frame window's href in the postMessage and matching iframes based on src, I am passing the window name and matching iframe name attributes.

Note that this is not backwards compatible to existing markup in the sense that all responsive iframes need to have a unique name attribute. Existing markup won't break, it just won't match and resize.

If you wanted to support iframes without name attributes, I guess you could fall back to passing the href and then matching iframe srcs if an href is received instead of a name. But I didn't write that fallback yet in since I'm just going to put unique names on all my iframes.

[inadarei]

Cool! Thanks.

[mbseid]

I think we should check the name attribute and fall back to the src. Having this would break a lot of old code, and is very avoidable.

I'm thinking something like this:

var iframeName = $('iframe[src="'+elem+'"]');
if(iframeName.length){
  //We have the iframe, lets update the css
}else{
  //Fallback to src lookup
}

The other idea I had is we could pass the name or src in the message. Any thoughts?

[mbseid]

Thanks for the PR. Overall, it looks pretty awesome, and I love the idea of having multiple iframe support within a document. I tried running it locally, and ran into some issues as I mentioned above. The biggest issue is the hardcoded "padding" height. It caused my iframe to grow to infinitum. Lets see if we can figure out a way to resolve that.

[sarahgoldman]

I added the 130px height padding because, on the page I was framing in, the height alone was coming up just a little short and causing a scrollbar and then an infinite loop due to the scrollbar changing the size of the frame. So I added a little padding on the height to be safe and it was working for me. I didn't see any infinitely growing iframes.

Also in regard to the name vs. src, yes, there should be a fallback to src on both sending the message and grabbing the iframe. So if the window has a name send it, if not send location.href. And then on the parent side you could use a regex to check if you are receiving an href or a name and handle accordingly.

[mbseid]

Thanks for the response. The padding hd been a problem for a little bit.
All browsers are different and their is no simple solution. Which browser
were you testing on? I'm working on a Mac with Chrome.

I can assist on the fallback. It'll be on Monday, but I don't think it will
be hard.

On Friday, September 27, 2013, Sarah Goldman wrote:

I added the 130pc height padding because for the page I was framing in the
height alone was coming up just a little short and causing a scrollbar and
then an infinite loop due to the scrollbar changing the size of the frame.
So I added a little padding on the height to be safe and it was working for
me. I didn't see any infinitely growing iframes.

Also in regard to the name vs. src, yes, there should be a fallback to src
on both sending the message and grabbing the iframe. So if the window has a
name send it, if not send location.href. And then on the parent side you
could use a regex to check if you are receiving an href or a name and
handle accordingly.

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/21#issuecomment-25278040
.

[sarahgoldman]

I tested it in Chrome, Safari, FF, and IE8+ and didn't see any infinitely growing iframes. But I only tested it with two frame srcs. Not sure if the css or content on the framed page might be affecting the height calculation in some cases.