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