背景:
我正在创建一个页面,允许用户单击链接来查看 FancyBox v2 中餐厅的菜单。我最初将菜单的每一页作为单独的图像,但通过用户测试,我们决定消除每个菜单页的缩略图并将它们连接成一个高图像(最后一页下方的每一页)。用户现在可以在 FancyBox iframe 内一次性滚动浏览整个菜单。这在大多数浏览器中都可以正常工作,甚至在我测试过的移动设备上也是如此。
问题:
Firefox 会自动缩小图像以适合 iframe。用户被迫使用小放大光标单击图像才能查看完整尺寸的图像,然后继续阅读菜单。
JSFIDDLE: http://jsfiddle.net/2ZW9K/6/
研究结果:
我在浏览器的代码检查器中发现 FancyBox 创建了一个 #document
, <html>
, <head>
, <body>
,以及 <img>
在 iFrame 内部,如果我添加类似 <style type="text/css">img{height: auto !important; width: auto !important}</style>
的内容,它消除了 Firefox 对图像所做的任何缩小。但是,我完全不知道如何将这个附加样式插入到创建的 iFrame 的 html 中。我查看了整个 FancyBox 源代码,并尝试使用 FancyBox 的 afterLoad
插入 HTML/CSS选项,但我不知道如何访问创建的 iFrame 的内部来放置任何内容。
问题:
任何人都可以帮助我在 FancyBox 源代码中找到可以插入这些样式的位置,或者是否有人知道一行 jQuery 可以将我置于创建的 <head>
中标签?
最佳答案
在提供的jsfiddle上,由于同源策略,您无法访问iframe内容。事实上,fancybox将图像的src属性设置到iframe中。 因此,也许可以在同一域(与图像相同)上测试它并尝试访问 iframe 内容,如下所示:
afterLoad: function () {
$('.fancybox-iframe').contents().find('head');
},
但我认为这不是正确的方法,因为内容已经被显示了。
我建议将图像嵌入到自己的 html 页面中,这样您就可以应用您想要的任何样式,例如,测试它并查看其是否达到预期结果:
http://jsfiddle.net/5QSnK/show/
这是嵌入图像页面的链接,用于示例:
关于jquery - 是否可以在动态创建的 iFrame 的头部插入样式标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17090765/