Loading Content and Appending Styles

Question

I know this can't be done with iFrames or the default jQuery load function, so I'm looking for a 'workaround' or concept that would work better.

We have to load an iframe to display a checkout process (long story) and the iFrame content is too wide. Without making it scroll, is there a way to hide some of the content or resize the inner content to fit 900px of content into a 600px wide box?

I'm not sure if there's a single option or not, otherwise we might have to overlay in a light box, but that's not ideal for us.

EDIT: I guess what I'm looking for is a cross-browser setup that allows me to load content from an external location into a DIV that holds active links, etc. Probably not possible?

Answer 1

I'm sure such a drastic change to the layout of the page you're loading into the iframe presents design questions. But assuming you know how you're going to make that page 1/3 narrower, and assuming you're serving the iframe from the same domain as the parent page, you can set up an alternate stylesheet, and append it to the iframe document.

In the parent document (not tested):

var framedoc = frames['your_frame'].document;
var framedoc_head = $(framedoc).find('head');
$('<link/>', {
  rel : 'stylesheet',
  type: 'text/css',
  href: '/your_narrower_style_sheet.css'
})
.appendTo(framedoc_head);