JSONP vs IFrame?

Question

Soon I'll be needing to build a widget that some of our clients can embed in their own websites.

To future proof my widget the embed code would be something like this:

<script type="text/javascript" src="path/to/remote/file.js"></script>
<div id="my_widget"></div>

What are the strengths and weaknesses of iframes vs JSONP?

Are there any common SEO based issues with iframes?

Answer 1

First of all, iframes and jsonp are not mutually exclusive: one is a rendering mean, the other is a communication mean.

Your choice is rather between in-document inclusion (that is creating the widget within the host DOM) or in-iframe inclusion (that is having a new, separate DOM for the widget).

The advantage of an iframe is sandboxing: no collision between your widget and the host's javascript and css. That means you can safely:

• use/define any javascript library you want
• use simple html code together with simple css rules (which is a clear bonus for maintenance)

As for the drawbacks:

• an iframe is heavy-weight and may seriously slow down host page rendering
• the iframe will also consume much more memory and resources, which may be a problem if the host page is targetted at mobiles

So, if it is reasonable to assume people using your widget will be willing to "adapt" their pages for it, go the in-document way. If not, use an iframe but understand the limits.

As for SEO issues, as long as you dynamically create the widget (whether it's in-document or with an iframe), search engines won't see it. I dunno if that's what you want, but that's what you'll get ;)

Answer 2

Heres some slides from a presentation on cross domain scripting by Alex Sexton

http://www.slideshare.net/SlexAxton/breaking-the-cross-domain-barrier

Unfortunately its just the slides so is missing the accompanying explanations but could be helpful

Answer 3

If you're making API calls and only fetching data, JSONP will result in better performance. If you're rendering things, then you must use iframes. If you want to prevent the host site from access to your widget data, iframes are the way to go. But if your data is public, then JSONP will result in a simpler implementation (since iframes will mean you need to deal with resizing). On the flip side, iframes provide for good CSS sandboxing, so you won't collide with the host page's CSS.

Answer 4

I chose to go with JSONP. You can see the details of how I implemented it here: http://stackoverflow.com/questions/3764152/if-i-allow-partner-sites-to-republish-my-rss-feed-will-that-boost-my-seo-ranking/3946968#3946968

Some people gave their opinions on SEO. I'm still not sure, however, if it helps SEO. I just got an idea to test it though, and I'm going to carry it out right now! I'm going to make a page with just the JavaScript that renders the widget (feed in this case). Then, I'll use Google's Webmaster Tools to see if Google picks up any of the keywords in the feed content. I'll post the answer to the link above after I get the results.

Wish us the best!

Matt