Making an embeddable widget, with expanding content

[Leros]

I'm working on a project which involves an embeddable widget that our customers can place on their sites. I'm using an iframe to embed the content with some jquery magic to resize the iframe to fit the content. This worked great in the beginning.

I've added some expanding content to the widget (using jquery's slideToggle function), but the iframe does not expand with the new content. What is the best way to go about embedding content that can expand in size?

(I have very little knowledge about web programming, so go easy on me).

 

[Ken g6]

Must you use an iframe? The general idea of an iframe is to separate the container from the contents, so the container page doesn't know the size of the contents of the iframe.

Would jQuery UI help?

 

[Ka0t1x]

You should be able to get away with using a regular div and populating the div via innerHTML/.html();

 

[Leros]

Must you use an iframe? The general idea of an iframe is to separate the container from the contents, so the container page doesn't know the size of the contents of the iframe.

Would jQuery UI help?

I didn't know about jQuery UI. What a great resource!

As I understand, an iframe also prevents the client from modifying your widget with CSS or javascript. If you just put your content in a div or something, then the client can modify the content/styling of the widget, whether on purpose or accidentally.

 

[Leros]

You should be able to get away with using a regular div and populating the div via innerHTML/.html();

So basically, my embeddable widget would be a piece of javascript? How exactly would that work?

Right now, the iframe just loads dynamic page (e.g. mysite.com/embed?id=123) off my server. I'm using Java servlets with a Tomcat server if it matters.

 

[Ken g6]

Given that your site and page to load are on the same server:

http://microformats.org/wiki/rest/ahah

 

[Leros]

Given that your site and page to load are on the same server:

http://microformats.org/wiki/rest/ahah

I never said the sites would be on the same server. The idea is that our users will put this widget on their own sites.

 

[Leros]

So how I can do this with Javascript? Forget the iFrame.

I'd like to just populate a div, which I could do with jquery's load function. But, that will not work cross site. It seems like it should be doable, since this is basically what Google Adsense does.

 

[Ken g6]

http://en.wikipedia.org/wiki/JSONP ?

 

[PhatoseAlpha]

If you can create the element with pure DOM functions and have something that can output the script, they can just reference your js in a script tag. You'd need to have the script have all necessary data for the widget, then create the element with the DOM.

Is this static content in the Widget? It's real hard to make suggestions without knowing exactly what you want the thing to do.

 

[Leros]

http://en.wikipedia.org/wiki/JSONP ?

That's what I ended up figuring out today. It worked great.

 

[Leros]

I ended up using javascript instead of my iframe. My embed code looks something like this:

<script type="text/javascript"> 
	var mysite_embed_id = "123";
	//additional optional params
</script> 
<script src ="mysite.com/js/embed.js"></script>

In embed.js, I add a script tag to the DOM which has a src of mysite.com/embed?callback=processResponse&id=123. It does a get from my server to get the javascript (which is really just JSON wrapped with the callback function):

processResponse(<JSON>)

This calls a function in embed.js called processResponse which takes the JSON and constructs the HTML that gets inserted into the DOM.

Its a bit annoying having to generate the DOM elements in javascript, because the Java servlet I was using with my iframe was simpler.

My only concern now is that the users can screw up the widget with their own javascript and CSS, but maybe I shouldn't worry too much about that. I just don't want people seeing my company's widget affected by a user's CSS/javascript and thinking that my company wrote a crappy widget.