是否可以在动态创建的iFrame的头部插入样式标签

背景：

我正在创建一个页面，允许用户单击链接以查看 FancyBox v2 中的餐厅菜单。我最初将菜单的每一页都作为单独的图像，但通过用户测试，我们决定消除每个菜单页面的缩略图，并将它们连接成一个高图像(每个页面低于最后一页(。用户现在可以在FancyBox iframe中一次滚动浏览整个菜单。这在大多数浏览器中都运行良好，甚至在我测试过的移动设备上也是如此。

问题：

Firefox 会自动缩小图像以适应 iframe。用户被迫使用小放大光标单击图像以查看全尺寸图像，然后继续阅读菜单。

JSFIDDLE：http://jsfiddle.net/2ZW9K/6/

调查结果：

我在浏览器的代码检查器中发现，FancyBox在iFrame内创建了一个#document，<html>，<head>，<body>和<img>，如果我添加类似<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/

这是指向嵌入式图像页面的链接，用于以下示例：

http://jsfiddle.net/Stb6A

实际上

，如果您要显示image，则根本不需要iframe(并省去访问iframe内容和所有相同来源策略的东西，样式，等等的麻烦(

此网页

<a class="fancybox" href="http://muellerpages.com/menu.jpg">
    Click For FancyBox
</a>

只需要这个代码：

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        fitToView : false, // so the image will be full sized
        maxWidth : 612, // optional if the image is bigger than this size
        maxHeight: 1004,
        padding: 5,
        helpers: {
            overlay: {
                css: {
                    'background': 'rgba(0,0,0,.85)'
                }
            }
        }
    });
});

参见 JSFIDDLE

如果将来有人感兴趣，我使用的最后一行代码是：

后加载：函数(( {

$('.
fancybox-iframe'(.content((.find('head'(.append(' <style type="text/css"> img{height： auto ！important; width： auto ！important; cursor： default ！important} </style> '(;

}，

谢谢@ A. Wolff，你的回答真的很有帮助。

我已经尝试了以下方法，它奏效了：

afterLoad: function () {
    $('.fancybox-iframe').contents().find('html').find('body').find('img').css({ "maxWidth": "100%" });
},

相关内容

最新更新

热门标签：