How to prevent javascript and css messing up?

Question

My company has a website that serves the same app to several clients so every client has his own html templates and we can't edit anything of that.

We developed a beutiful Web 2.0 app with lots of jQuery that works great, it's a web toy fully enjoyable but we have to integrate it with the horrible and buggy stuff from the clients (like a code sandwich) and as it always gave us problems of all kind we decided to use an iFrame for our app and a little js to refresh its height (the parent and the iFrame content come from the same domain). The iFrame save us from all the mess and weirdness but it's sad to use something like that.

Do you know a better solution for this?

Answer 1

If your aim is to be independent of third-party CSS and JS, you must indeed use a separate document such as an iframe. The customer's code doesn't have to be ‘bad’ for you to get unexpected interactions between the content you're using and the stylesheet rules and actions they're working with.

Anyhow it would be rude for you as a guest script of someone else's page to be dragging an large, intrusive framework like jQuery into their window. Even if you used noConflict there are still many possible interactions if the script on their page doesn't expect to see it there.