如何将本地域中的 CSS 规则应用到另一个域中 iFrame 中的内容
在过去的两天里，我一直在努力做两件事：
- 使用来自另一个域的内容创建一个 iframe，它将自动调整大小到 iframe 中内容的长度
- 〜最重要的是〜将 css 样式应用于内容[来自外部域] 在该 iframe 中。
我探索了 jQuery 的东西，发现没有“可靠”的爱，“frameReady()”插件似乎消失了......我不知道该怎么做 - 或者即使这是最好的方法。
所以;有没有更好、更可靠的方法来实现这一目标？ 我可以完全访问服务器，因此 .htaccess/php/cgi - 甚至可以包含 apache [linux!] 的conf。 需要注意的一点是，其中一个框架是预订系统，需要来回传递数据。 [技术上来说，另一个框架也是如此......]
-谢谢 -肖恩
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 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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
从技术上讲，IFRAME 是另一个窗口，因此外部窗口的 CSS 不能应用于框架 HTML 文档中的 HTML。
如果窗口之间允许通信，则可以自动调整大小，但我不确定这是否可靠的跨域，尤其是跨浏览器。如果两个窗口位于同一域，那么可以。另一种选择是滚动条，它们并不是那么邪恶。
预订系统可以被称为服务器端并在您的页面中重新提供服务，但是如果您试图包含预订系统的交互性，这也是一个很大的痛点。我不知道您可以使用任何软件包来为您执行此操作。
我倾向于坚持使用 IFRAME，并致力于为预订系统添加白色标签，以便在 IFRAME 内可以更好地呈现它。除非您并不意味着您拥有对预订系统服务器的完全访问权限，在这种情况下，如果预订系统没有为此提供特意的 API，您将会陷入困境。
您将不得不重新编写其内容并通过您的服务器隧道进行交互，就像代理一样，或者类似于 skyscanner.net 和fused.com 等网站的做法。
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.
您可能想阅读这篇文章，然后查看 Porthole.js：
http://shouldersofgiants.co.uk/Blog/post/2009/08/17/Another-Cross-Domain-iFrame-Communication-Technique.aspx
端口： < a href="http://ternarylabs.github.com/porthole/" rel="nofollow">http://ternarylabs.github.com/porthole/
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/