是否可以在动态创建的iFrame的头部插入样式标记？
[英]Is it possible to insert a style tag in the head of a dynamically created iFrame?
问题描述
Background: 
背景：
I'm in the process of creating a page that allows the users to click on a link to view a restaurant's menu in FancyBox v2. 我正在创建一个页面，允许用户点击链接查看FancyBox v2中的餐馆菜单。 I originally had each page of the menu as a separate image, but through user testing, we decided to eliminate the thumbnails for each menu page and concatenate them into one tall image ( each page below the last ). 我最初将菜单的每个页面都作为单独的图像，但是通过用户测试，我们决定消除每个菜单页面的缩略图并将它们连接成一个高图像（ 每个页面位于最后一个下面 ）。 Users can now scroll through the whole menu at once inside the FancyBox iframe. 用户现在可以在FancyBox iframe内一次滚动整个菜单。 This works fine in most browsers, and even on the mobile devices I've tested. 这在大多数浏览器中都能正常工作，甚至在我测试过的移动设备上也能正常工作。
The Problem: 问题：
Firefox automatically scales the image down to fit in the iframe. Firefox会自动缩小图像以适应iframe。 The user is forced to click the image with the little magnifying cursor to see the image in full size and then proceed to read the menu. 用户被迫用小放大光标点击图像以查看完整尺寸的图像，然后继续阅读菜单。
The JSFIDDLE: http://jsfiddle.net/2ZW9K/6/ JSFIDDLE： http ： //jsfiddle.net/2ZW9K/6/
The Findings: 调查结果：
What I've found in the browser's code inspector is that FancyBox creates a #document , <html> , <head> , <body> , and an <img> inside of the iFrame, and if I add something like <style type="text/css">img{height: auto !important; width: auto !important}</style> 我在浏览器的代码检查器中发现的是，FancyBox在iFrame中创建了一个#document ， <html> ， <head> ， <body>和一个<img> ，如果我添加了类似<style type="text/css">img{height: auto !important; width: auto !important}</style> <style type="text/css">img{height: auto !important; width: auto !important}</style> , it removes any scaling down that Firefox has done to the image. <style type="text/css">img{height: auto !important; width: auto !important}</style> ，它删除了Firefox对图像所做的任何缩小。 However, I'm at a complete loss as to how to insert this additional style into the html of the created iFrame. 但是，我完全不知道如何将这个额外的样式插入到创建的iFrame的html中。 I've looked throughout the entire FancyBox source code and have tried to insert the HTML/CSS using FancyBox's afterLoad option, but I can't figure out how to access the internals of that created iFrame to place anything. 我查看了整个FancyBox源代码并试图使用FancyBox的afterLoad选项插入HTML / CSS，但我无法弄清楚如何访问创建iFrame的内部来放置任何内容。
The Question: 问题：
Can anyone assist me in finding where in the FancyBox source code I can insert these styles, or does anyone know a line of jQuery that would place me inside the created <head> tag? 任何人都可以帮助我找到FancyBox源代码中我可以插入这些样式的位置，或者有没有人知道一行jQuery会将我置于创建的<head>标记内？
4 个解决方案
解决方案1
2 已采纳 2013-06-13 15:57:45
On provided jsfiddle, you cannot access iframe content due to same origin policy. 在提供的jsfiddle上，由于相同的原始策略，您无法访问iframe内容。 In fact, fancybox set src attribute of image to the iframe. 实际上，fancybox将图像的src属性设置为iframe。 So, maybe test it on same domain (same as image) and try to access iframe contents like that: 所以，也许在相同的域上测试它（与图像相同）并尝试访问iframe内容：
afterLoad: function () {
$('.fancybox-iframe').contents().find('head');
},
But i think its not the right way to do it because the content will already beeing displayed. 但我认为这不是正确的方法，因为内容已经显示出来了。
I'll suggest to embeded image in its own html page, this way you could apply any style you wish, for example, test this and see there if its expected result: 我建议在自己的html页面中嵌入图像，这样你可以应用你想要的任何样式，例如，测试它并看看它是否有预期的结果：
http://jsfiddle.net/5QSnK/show/ http://jsfiddle.net/5QSnK/show/
This is link to embeded image page, used for the example: 这是嵌入图像页面的链接，用于示例：
解决方案2
1 2013-06-13 18:15:46
Actually, if you are going to show an image , you don't need an iframe at all (and save the trouble of accessing the iframe contents and all the same origin policy stuff, style, blah, blah, etc.) 实际上，如果你要展示一个image ，你根本不需要一个iframe （并且省去了访问iframe内容和所有相同的原始政策内容，风格，等等，等等）。
This html 这个HTML
<a class="fancybox" href="http://muellerpages.com/menu.jpg">
Click For FancyBox
</a>
Only needs this code : 只需要这个代码：
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)'
}
}
}
});
});
解决方案3
0 2013-06-13 16:46:16
If anyone in the future is interested, the final line of code that I used is: 如果将来有人感兴趣，我使用的最后一行代码是：
afterLoad : function() {
$('.fancybox-iframe').contents().find('head').append('
<style type="text/css">img{height: auto !important; width: auto !important; cursor: default !important}</style>');<style type="text/css">img {height：auto！important; width：auto！important; cursor： default！important}</style>'）;},
解决方案4
0 2018-08-09 08:26:59
Thank you @ A. Wolff your answer was really helpful. 谢谢@ A. Wolff你的答案非常有帮助。
I've tried the following and it worked: 我尝试过以下内容并且有效：
afterLoad: function () {
$('.fancybox-iframe').contents().find('html').find('body').find('img').css({ "maxWidth": "100%" });
},
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.