Possible method to inject JS/CSS at runtime?

Hi,

I'm trying to figure out if there's a livesite API method that can add CSS/JS includes to the page header at runtime.

I'd like my components to be "self contained" to reduce dependency problems.

For example, to embed analytics on the page, I was going to create a component similar to the webtrends component, but have it add "webtrends.js" as a javascript include in the header only on the pages where the component is used (rather than sitewide).

I'm sure this can be done with custom java, but I was hoping to avoid our development queue if possible.

I've looked through the API documentation and nothing is jumping out.

This seems like a pretty basic function to me. Am I missing something?

Find more posts tagged with

Comments

Garth McMillan

As far as I'm aware, there's no way to do it without coding some Java.

Look into the "page scope" object for a way to do it. There's info in the documentation and on these forums.

ben_a

Thanks. I wanted to make sure I wasn't missing the obvious.

Rick Poulin

For example, to embed analytics on the page, I was going to create a component similar to the webtrends component, but have it add "webtrends.js" as a javascript include in the header only on the pages where the component is used (rather than sitewide).

Well for this example specifically, you can avoid Java-based injection because the JS file doesn't need to be in the header (loaded before the page renders). The webtrends include is typically at the bottom of the body, so you could just have your component render the script tag include wherever the component was placed on the page. If you're going to go fancy, I'd suggest you inject in RuntimePage.PAGESCOPE_BODY_INJECTION_BOTTOM rather than PAGESCOPE_HEAD_INJECTION, again for this specific case.