How do I apply CSS rules from a local domain to content in an iFrame from another domain
I've been killing myself for the past 2 days trying to do 2 things:
- Create an iframe with content from another domain that will auto resize to the length of the content in the iframe
- ~and most 开发者_StackOverflow社区importantly~ Apply css styles to the content [from the external domain] in that iframe.
I've explored the jQuery stuff, and found no 'reliable' love, the 'frameReady()' plugin seems to have disappeared ... I'm not sure what to do - or even if this is the best way.
So; is there a better and more reliable way to get this accomplished? I have full access to the server so .htaccess/php/cgi - even including a conf for apache [linux!] is possible. One thing to note is that one of the frames is a booking system that needs to pass data back and forth. [well technically so is the other frame....]
-thanks -sean
An IFRAME is technically another window, so the CSS for the outer window cannot be applied to the HTML within the framed HTML document.
Auto-resizing is possible, providing communication is allowed between the windows, but I'm not sure this is reliable cross-domain, and especially cross-browser. If both windows were on the same domain, then yes. The alternative is scroll bars, they're not that evil.
The booking system can be called server-side and re-served within your pages, but this is also a big pain point if you're trying to contain the booking systems interactivity. I don't know of any packages you could use that do will do this for you.
I'd be inclined to either stick with an IFRAME and work on white-labelling the booking system so that it can be presented better when inside an IFRAME. Unless you didn't mean you have full access to the booking system's server, in which case you're going to struggle if the booking system doesn't provide a deliberate API for this.
You'll be left with re-writing its content and tunnelling the interactivity through your server, like a proxy, or perhaps similar to what the likes of skyscanner.net and confused.com do.
You might want to read this post and then check out Porthole.js:
http://shouldersofgiants.co.uk/Blog/post/2009/08/17/Another-Cross-Domain-iFrame-Communication-Technique.aspx
Porthole: http://ternarylabs.github.com/porthole/
精彩评论