How to make fancybox resize to custom created iframe size

I want to make the fancybox dimensions match the content size of a "manually created" iframe.

I tried this: http://jsfiddle.net/ystLD/3/

But it doesn't work and now I'm kinda stuck here.

Does anyone know how to do this?




A "manually created" iframe has the disadvantage that fancybox doesn't really know what type of content is dealing with. I would rather open fancybox with the option type: "iframe".

Then, the only way I can think you can re-size fancybox according to the contents of the iframe is hard-coding the dimensions inside the page opened within the iframe, either in the html, body or a wrapper container like

<html style="width: 800px; height: 650px;">

then you could use the beforeShow callback to get the dimensions of the iframe like

  beforeShow: function(){
   this.width = $('.fancybox-iframe').contents().find('html').width();
   this.height = $('.fancybox-iframe').contents().find('html').height();

If you don't own the opened page and you cannot hard-code its dimension, you still can try getting the innerWidth() and innerHeight() of the html or body tag, but it can be really buggy as you can see in this forked fiddle

Here is the answer that worked for someone else https://stackoverflow.com/a/10776520/1055987

You can attach the width and height to the attributes of the iframe since you're creating it manually anyways.

.attr({ name: 'blah', width: '500px', height: '500px' })

If you want something that will exactly match the size of the page you are fetching then it's a pretty tedious task since an iframe is pretty much like opening a browser window. You would have to determine the size of the widest div and such programmatically by analyzing the structure. Also, you would have to determine if the page uses a responsive layout and use a specific size for that.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

  • Fancybox 2 基于内容大小的动态宽度(Fancybox 2 Dynamic Width Based on Content Size)
    问题 我有一个通过 Fancybox 2 打开的 IFrame 播放视频: HTML: <a class="fancybox-video" href="/user/intro-file.cfm" rel="file_name" title="View Video">File Name</a> Javascript: $("a.fancybox-video").fancybox({ scrolling : 'no', type : 'iframe', helpers : { title: null } }); 视频是用户上传的,所以我不知道大小。 我最终会在 Fancybox 上设置 maxHeight 和 maxWidth,但为了更容易地排除故障,我已经删除了它们。 如何根据内容设置 Fancybox 的宽度? 对于我的大约 400 像素宽的测试文件,fancybox 本身被设置为 830/800 像素宽(外部和内部宽度):过宽的fancybox 屏幕截图 http://img528.imageshack.us/img528/3872/花式盒子宽度.png autoSize 和 fitToView 不起作用。 IFrame 页面上没有设置默认宽度的 CSS 或代码。 如果我在 Fancybox 代码中强制设置宽度,它会起作用,但由于我的内容是动态的,因此它不适用于实时系统。
  • 使用fancybox查看全尺寸图片(Using fancybox to view full sized image)
    问题 我正在尝试开发一些代码,其中 jquery 获取图像并调整它们的大小以适合父 div,并且可以选择单击图像以使用fancybox 以全尺寸查看它。 我正在尝试使用“扩展”类来完成所有图像,并且不要期望每页具有该类的图像。 以下是我到目前为止所想出的。 图像调整大小就好了,我可以单击图像以调出fancybox,但它是调整后的大小,而不是原始大小。 我有 fwidth 和 fheight 作为原始尺寸的变量,但指定它们不起作用,因为它是内联的。 所以,我需要使用一个我已经想出来的 iframe,并试图在它周围环绕一个链接,并将链接指定为具有指定尺寸的 iframe,为链接抓取 .attr("src") 。 但是无论我做什么,它都会转到fancybox 中的404 页面。 以下是我所拥有的,不知道如何继续,或者我是否以错误的方式思考这个问题? if($('img.expand').length){ var parentClass = $('img.expand').parent().attr("class"); var fwidth = $('img.expand').attr("width"); var fheight = $('img.expand').attr("height"); if($('img.expand').parents().is('.grid_10')){ $
  • 如何在 FancyBox 显示带有以下内容的 iframe?(How show iframe with content below at FancyBox?)
    问题 现在我编写了一个标准代码,用于在窗口 FancyBox 中加载 iframe。 所以我指定了iframe类型和带有 youtube 参数的href链接。 $.fancybox({ 'type' : 'iframe', 'maxWidth': "90%", 'href' : href.replace(new RegExp('watch\\?v=', 'i'), 'embed/') + '?theme=dark&color=white&autohide=1&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1&showinfo=0&autoplay=1', 'padding' : 0, 'margin' : 0, 'autoCenter': false, 'scrolling' : 'no', 'fitToView' : false, 'width' : 950, 'overlayShow': true, beforeLoad : function() { var template; var hash; var info; getVideo(id); }, afterLoad:function(){ $('.fancybox-inner').append(template); changeURL(matchYoutubeUrl
  • Fancybox 2 Dynamic Width Based on Content Size
    I've got an IFrame being opened via Fancybox 2 that plays a video: HTML: <a class="fancybox-video" href="/user/intro-file.cfm" rel="file_name" title="View Video">File Name</a> Javascript: $("a.fancybox-video").fancybox({ scrolling : 'no', type : 'iframe', helpers : { title: null } }); The video is user-uploaded, so I don't know the size. I will be setting a maxHeight and maxWidth on the Fancybox eventually, but I've removed them for easier troubleshooting. How can I set the width of the Fancybox based on the content? With my test file, which is around 400px wide, the fancybox itself is being
  • Fancybox - Updating size of fancybox with Iframe content?
    On my site I open up a fancybox containing IFRAME content. Is it possible to update the size of the fancybox when a link is clicked within it? For example, I have it set to 535px width initially, when a specific link is clicked I'd like the fancybox to resize to 900px width. Any idea how I can achieve this? Thanks!
  • Using fancybox to view full sized image
    I'm trying to develop some code where a jquery takes images and resizes them to fit the parent div, with an option to click on the image to view it in full size with fancybox. I'm trying to do it all images with class "expand", and don't anticipate having more than on image with that class per page. Below is what I've come up with so far. The image resizes just fine, and I can click on the image to bring up the fancybox, but it is at the resized size, not the original. I have fwidth and fheight as vars for the original dimensions, but specifying them doesn't work, since its inline. So, I need
  • 无法聚焦fancybox iframe输入(Can't focus fancybox iframe input)
    问题 所以我使用fancybox 加载登录iframe,我希望它onComplete 将焦点放在用户名字段上。 如果有人可以看看这段代码并告诉我出了什么问题,那就太好了。 谢谢。 /* Function to resize the height of the fancybox window */ (function($){ $.fn.resize = function(width, height) { if (!width || (width == "inherit")) inner_width = parent.$("#fancybox-inner").width(); if (!height || (height == "inherit")) inner_height = parent.$("#fancybox-inner").height(); inner_width = width; outer_width = (inner_width + 14); inner_height = height; outer_height = (inner_height + 14); parent.$("#fancybox-inner").css({'width':inner_width, 'height':inner_height}); parent.$("#fancybox-outer"
  • Can't focus fancybox iframe input
    So I'm using fancybox to load up a login iframe, and I would like it onComplete to bring focus to the username field. If someone could take a look at this code and let me know what's wrong, that'd be great. Gracias. /* Function to resize the height of the fancybox window */ (function($){ $.fn.resize = function(width, height) { if (!width || (width == "inherit")) inner_width = parent.$("#fancybox-inner").width(); if (!height || (height == "inherit")) inner_height = parent.$("#fancybox-inner").height(); inner_width = width; outer_width = (inner_width + 14); inner_height = height; outer_height =
  • jqueryfancybox firefox 尺寸问题(jquery fancybox firefox dimensions issue)
    问题 我正在使用 jquery Fantasybox 在我的网站上显示叠加视频。 下面的 jquery 代码在 Chrome 中运行良好,但在 Firefox 中,视频减少了,保存视频的容器的尺寸也减少了。 以下是jquery代码 $('.fancybox-media').fancybox({ 'type': 'iframe', 'width': 800, 'height': 580, 'autoDimensions': false, helpers : { media: true } }); 下面是来自 chrome 和 firefox 的图片 在这方面的任何帮助将不胜感激。 回答1 如果您使用type : "iframe"您可能不需要使用media helpers (它实际上将内容移动到iframe )。 此外,如果您希望fancybox 保持固定尺寸,则需要添加fitToView: false ,否则fancybox 将调整大小以适应较小屏幕的视口。 此外,您可能需要禁用iframe preload以避免在内容未完全加载时出现一些已知问题(浏览器可能会以不同的方式处理大小计算) 所以这段代码应该可以在 Firefox、Chrome 甚至 IE7+ 中发挥作用: $('.fancybox-media').fancybox({ type: 'iframe', width: 800
  • iPhone 上的 Fancybox 问题(Fancybox problem on iPhone)
    问题 Fancy box 在 iPhone 和 iPad 上似乎有问题。 转到这里 http://fancybox.net/blog 并在 iPhone 或 ipad 的页面上单击“5. 显示登录表单立即尝试”。 表单不在中心,当您尝试输入详细信息时,该框会在页面上移动并使其无法使用。 任何修复? 谢谢,C 回答1 每次调整浏览器窗口大小时,Fancybox 都会尝试自动调整大小并使其居中,并且此事件在 iPad 和 iPhone 上经常被触发。 对于花式框 1.3.4,控制它的代码是第 608 行: $(window).bind("resize.fb", $fancybox.resize); 为了解决这个问题,我修改了fancybox JS的这一部分,并添加了另一个名为“resizeOnWindowResize”的选项,你可以为iPad和iPhone用户设置为false,或者一起禁用。 if(currentOpts.resizeOnWindowResize) { $(window).bind("resize.fb", $fancybox.resize); } 您还必须在 $.fn.fancybox.defaults 哈希映射中为此选项添加默认值。 然后,在调用fancybox 时,您可以使用这个新选项: $('#fancybox_link').fancybox(${
  • 如何在顶部放置fancybox(How to position fancybox on top)
    问题 如何将fancybox 从顶部放置100px 默认情况下它是居中对齐的。 我相信没有 api 设置。 任何人都可以帮助我在实际脚本上做这件事。 回答1 $.fancybox({ 'width' : 620, 'height' : 490, 'speedIn' :600, 'speedOut' :200, 'onComplete': function() { $("#fancybox-wrap").css({'top':'20px', 'bottom':'auto'}); } }); 回答2 我得到的解决方案是像这样设置包装器的样式: #fancybox-wrap { position: absolute; top: 100px !important; } 希望能帮助到你! 回答3 在fancyBox 2 中,我使用topRatio : 0 ,这个属性将fancyBox 移动到顶部,然后我使用jQuery().css()把它放在我想要的地方。 例子: $("#myfancy").fancybox({ wrapCSS : 'fancybox-custom', maxWidth : 500, maxHeight : 360, fitToView : false, width : '85%', height : '95%', autoSize : false, openEffect
  • 使用jquery.fancybox-media.js时,Youtube Video无法在ipad上的fancybox中工作(Youtube Video not working within fancybox on ipad when using jquery.fancybox-media.js)
    问题 我正在尝试使用具有响应功能的fancybox内的youtube video,以便它可以根据我曾经使用过jquery.fancybox-media.js的设备调整其尺寸,并且在台式机上效果很好,但在iPad上无法播放视频。 请访问http://fancyapps.com/fancybox/,然后单击Youtube(iframe),它仅可在台式机上播放,而不能在iPad上播放。 它使用jquery.fancybox-media.js 回答1 从fancybox版本2.1.0开始,提供了一个iframe API选项,该选项可让您预加载iframe的内容; 默认值为true 。 不幸的是,自jQuery v1.9 +起,我已经看到该选项在尝试显示iframe内容时(特别是流媒体或PDF文档)在某种程度上造成了问题。 解决方法是,我一直禁用iframe预加载功能,从而解决了许多已报告的问题。 Fancybox对youtube视频使用iframe类型,但其主页仍使用默认值( true ),但是,在您自己的网页中,您应该禁用此选项,并且youtube视频可以在iPhone / iPad上正常使用: 例如这个hrml <a class="fancybox" href="http://www.youtube.com/embed/3l8MwU0IjMI?wmode=opaque&autoplay
  • JQuery 模态框和 iframe(JQuery Modal Boxes and Iframe)
    问题 我一直在使用 Simple Modal,但我觉得它目前无法满足我的需求。 是否有一个模态框支持加载外部文件并允许这些外部文件关闭模态框并将父页面重定向到某个 url。 我想做的一个例子。 您有一个用户列表,您可以单击“添加用户”并弹出一个带有表单的模态框,您填写并提交它。 这将关闭该框并重新加载用户列表页面,以便您在列表中看到该用户。 然后你可以点击“编辑用户”,一个在表单字段中填写了用户信息的模态框会弹出,你可以编辑、提交,它会关闭和刷新。 我知道如果我将用户信息表单作为每个用户的隐藏 div 就可以做到这一点,但这不会很好地扩展,而且它有很多开销数据。 我在 Google Code 上找到了一些关于此的代码,但无法使其正常工作(可能是不同的简单模式版本 我也愿意改用另一个模态框工具。 更新: Thinbox 或 Fancybox 是否支持从子 IFrame 元素关闭? 回答1 听起来您已经找到了答案,但为了他人的利益,您可以通过在 iFrame 中使用以下 JavaScript 来关闭 FancyBox 的 iFrame 实现: parent.$.fn.fancybox.close(); 回答2 下面是一个基本的对话框交互,将内容加载到 iFrame 中,然后从 iFrame 关闭对话框。 请注意,为了说明这一点,我有两个代码片段。 第一个标记为file1.html。
  • Showing message in fancybox after button set location in ajax
    Currently modifying a Magento add to cart functionality... What we're attempting to achieve here is:- From the category listing:- Scenario 1 When add to cart button is clicked, if product has options, show options in fancybox before the option to proceed to checkout is given. Screenshot: Live example: Pretty much any product on this page. This is working as expected. Scenario 2 When add to cart button is clicked, if product has no options, show a 'product has been added to cart successfully' message with an option to 'checkout' or 'continue shopping' in fancybox. Issue: Unable to achieve the
  • 在ajax中设置按钮位置后在fancybox中显示消息(Showing message in fancybox after button set location in ajax)
    问题 当前正在修改 Magento 添加到购物车功能... 我们在这里试图实现的是:- 从类别列表中:- 场景一 当点击添加到购物车按钮时,如果产品有选项,在提供继续结账的选项之前,在fancybox中显示选项。 截屏: 现场示例:此页面上的几乎所有产品。 这按预期工作。 场景二 当点击添加到购物车按钮时,如果产品没有选项,显示“产品已成功添加到购物车”消息,并在fancybox中显示“结帐”或“继续购物”选项。 问题:无法实现这一目标。 我们目前所做的是一个弹出通知,它几乎可以在此页面上看到的工作(只需选择顶部附近的任何产品即可查看操作)。 但是,这不使用fancybox,它是使用以下标记的自定义实现:- <div id="fancybox<?php echo $_product->getId()?>" class="fancybox fancy-popupbox" style="position:absolute; display:none;"> <div class="popup-text"></div> <div class="popup-buttons"> <div style="float:left"> <button onclick="setLocation('')" class="button btn-shop" title="Continue Shopping"
  • 使用fancybox设置高度和宽度(using fancybox set height and width)
    问题 我是j查询的新手,很酷,但是我对如何在单击后使用以下代码生成的iframe中添加宽度和高度的方法感到困惑:使用此代码,所有建议都很好,在此先感谢Khadija $(document).ready(function () { $(".fancybox").fancybox(); }) .height = '600px'; 回答1 您必须将autoSize设置为false $(".fancybox").fancybox({'width':400, 'height':300, 'autoSize' : false}); 回答2 要为iframe的使用(仅限于一定的宽度和高度)初始化fancybox弹出窗口,您至少需要三个参数: jQuery的 $(document).ready(function(){ $(".fancybox").fancybox({ 'width' : 600, // set the width 'height' : 600, // set the height 'type' : 'iframe' // tell the script to create an iframe }); }); 您可以在FancyBox API页面上阅读所有有关可用选项的信息。 回答3 尝试: $(document).ready(function () { $(".fancybox"
  • jQuery Fancybox和YouTube嵌入(jQuery Fancybox and YouTube embeds)
    问题 我正在尝试嵌入YouTube,以便在Fancybox中打开。 我基于Fancybox页面上的代码-http://fancyapps.com/fancybox 这是我所拥有的: <a class="various fancybox" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a> 然后在call.js $(document).ready(function() { $(".various").fancybox({ maxWidth : 800, maxHeight : 600, fitToView : false, width : '70%', height : '70%', autoSize : false, closeClick : false, openEffect : 'none', closeEffect : 'none' }); }) 但是,每次我单击链接时,它只会在同一窗口中全屏显示YouTube视频,而不是在Fancybox中 我已经检查以确保我的Js文件正在加载,并且它们也正在加载,而且在FF控制台中也没有出现任何错误。 有人可以看到我在做什么吗? 回答1 如果您使用的是YouTube的embed格式,例如: <a class="various
  • Youtube Fantasybox 将无法使用(Youtube fancybox will not work)
    问题 我目前正在尝试制作一个里面有 youtube 视频的fancybox。 我目前在页面上有更多的fancyboxes,但似乎无法让这个fancybox 工作,其他fancyboxes 有fancybox-iframe 或fancybox 类,具体取决于内容,如果这有帮助的话。 下面是我想添加fancybox的链接。 <a href="http://youtu.be/krlR2-YGk4sI" target="_blank"><span class="cta floatL">through the eyes of a bigsmile advert</span><span class="playIco floatL"></span></a> 这是我放入我的fancybox的iframe。 有人能帮帮我吗? <iframe width="420" height="345" src="http://www.youtube.com/embed/krlR2-YGk4sI?autoplay=1" frameborder="0" allowfullscreen></iframe> 谢谢 回答1 您不需要将视频放在iframe 。 您唯一需要的 html 是指向您的视频的链接,例如: <a class="fancybox" href="http://youtu.be/krlR2-YGk4sI"
  • Fancybox:iframe不起作用(Fancybox: iframe doesn't work)
    问题 非常简单的test.html页面: <!DOCTYPE html> <html> <head> <title>Test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="fancybox/jquery.fancybox.pack.js"></script> <link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen"/> <script type="text/javascript"> $(document).ready(function () { /* This is basic - uses default settings */ $("a.iframe").fancybox(); }); </script> </head> <body> <a class="iframe" href="http://www.google.be/">This goes to iframe</a> </body> </html
  • 如何将fancybox绑定到动态添加的元素?(How to bind fancybox to dynamic added element?)
    问题 我使用jquery fancybox 1.3.4作为弹出表单。 但是我发现fancybox无法绑定到动态添加的元素。 例如,当我向当前文档中添加html元素时。 像这样:首先,我使用jquery将一个元素附加到正文中, $(document.body).append("<a href="home/index" class="fancybox"/>"); 我叫fancybox, $(".ajaxFancyBox").fancybox({padding: 0}); 但fancybox不适用于动态添加的元素。 我不能从此元素调用fancybox吗? 回答1 将fancybox(v1.3.x)绑定到动态添加的元素的最简单方法是: 1:升级到jQuery v1.7.x(如果尚未安装) 2:使用jQuery API on()+ focusin事件设置脚本。 为了使它工作,你需要找到parent与元素的元素class="ajaxFancyBox"按你上面的代码(或parent中的parent ,你需要它),并附jQuery on()它,因此例如,具有这个html: <div id="container"> <a class="ajaxFancyBox" href="image01.jpg">open image 01</a> <a class="ajaxFancyBox" href=