Question

我将图片链接传递给PHP文件，以便将所述图片返回到fancybox iFrame based upon the solution here

不幸的是，iframe的宽度不会因内容大小而改变，无论我通过iframe宽度的图像大小保持在850px左右，但高度会发生变化。

我甚至将图像样式设置为愚蠢的值，宽度：150px高度：150px，但iframe宽度保持在850px，左上角有缩略图尺寸图像。

尝试合并jfk's solution，但ifrme remand的宽度相同。

我如何怀疑iframe代码，以便高度＆amp;宽度是根据图像大小设置的吗？

$(document).on('click', '.Images', function(e) {
e.preventDefault();
var Href = 'GetImg.php?img=' + $(this).attr("href");
$.fancybox.open({
    href: Href,
    type: 'iframe',
    padding: 5
  });
});

Thanx Holly

Answer 1

您可以设置fancybox宽度。做这样的事情：

$.fancybox.open({
    href: Href,
    width: 500,
    type: 'iframe',
    padding: 5
  });
});

Answer 2

你试着给出宽度和高度参数吗？

http://fancybox.net/api

Answer 3

因为您使用的是iframe，所以您在父窗口中嵌套了一个子窗口。 Javascript安全性阻止父窗口在被iframe屏障隔开时直接访问子窗口的文档对象模型。快速解决方案是更改您的fancybox属性，以便将弹出窗口视为内联div而不是iframed窗口。然后，Fancybox可以自动查询内联窗口的高度和宽度属性，并自动调整大小。

但是如果您需要通过iframe实现弹出窗口，那么您将需要将单独的窗口视为来自不同的域。在子窗口中，您设置了一个postMessage（），其操作类似于将信息发布到另一个服务器的api调用。在父窗口中，您将设置一个侦听器，该侦听器将响应请求并对其接收的值执行操作。 postMessage（）的HTML5规范将让这两个窗口以这种方式进行通信。您可以将postMessage（）请求放在子窗口的$（document）.ready（）函数堆栈中，以及fancybox调用的onComplete（）函数堆栈中的监听器。

http://viget.com/extend/using-javascript-postmessage-to-talk-to-iframes

如何设置fancybox iframe的宽度

3 个答案: