如何将其他内容放入fancybox iframe中

我无法弄清楚如何将一些额外的内容放入iframe中，我用fancybox显示。如何将其他内容放入fancybox iframe中

我的基本设置：

$('.fancybox').fancybox({ 
    'autoScale': false, 
    'transitionIn': 'none', 
    'transitionOut': 'none', 
    'type': 'iframe', 
    'padding': 0, 
    'closeClick': false, 
    helpers: { 
     overlay: { 
      closeClick: false 
     } 
    } 

<a class="fancybox" href ="http://my-iframe.example"/><img src="myimage.jpg" width="x" height="y" /></a>

所以我需要把一对夫妇的自定义按钮和另一个JavaScript控件在iframe下，但在背景上覆盖的顶部。

我只是无法掌握什么可能是最好的方法来做到这一点。我想我可以把这个内容放在一个div中，然后在fancybox完成加载后显示该div。虽然我在回调函数时遇到了问题，但我只需要一些总体方向就可以做到这一点。

来源

2012-07-18 absentx

什么的fancybox的版本？因为您正在使用v1.3.x和v2.x中的选项，并且它们彼此不兼容。 – JFK 2012-07-18 23:23:07

啊好点！我正在使用版本2. – absentx 2012-07-19 00:21:30

如果使用的fancybox V2.X

尝试回调afterShow的附加内容的.fancybox-inner选择喜欢追加：

afterShow: function(){ 
var customContent = "<div class='customHTML'>My custom content</div>" 
$('.fancybox-inner').append(customContent); 
}

使用CSS样式和位置等附加内容，例如

.customHTML { 
position: absolute; 
z-index: 99999; /* this place the content over the fancybox */ 
bottom: 0px; 
right: 0; 
background: #f2f2f2; 
width: 200px; 
height: 100px; 
display: block; 
}

来源

2012-07-19 00:41:18 JFK

正是我所需要的感谢。 – absentx 2012-07-19 03:00:24

如果iframe是来自同一个域，那么你可以访问的内容与contents()

$('#fancybox-frame').contents().find('h1').prepend('<a>Button</a>');

这不会对跨域的情况下是不可能的。

如果您的情况也需要注入JavaScript小部件，注入DOM可能会很困难，您可以更好地选择与iframe一起显示的其他div。

对于刚刚根据的fancybox位置使DIV显示在onComplete事件或onStart事件，然后它定位，高度等

为了使上述叠加，给它一些定位，你应该很明显，并给出一个更高的z-index覆盖。

#fancybox-overlay { 
    display: none; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: 1100; 
} 
#mydiv{ 
    position:absolute; 
    z-index:1101; 
    }

来源

2012-07-18 23:07:16 sabithpocker

Iframe是针对不同的域名，欣赏答案，会试用。 – absentx 2012-07-19 00:22:54

OP没有在原始问题中指定fancybox的版本，但他正在使用v2.x ...在这种情况下选择器'$（'＃fancybox-frame'）'（v1.3。2+）应该是'$（'。fancybox-iframe'）'为v2.x – JFK 2012-07-19 00:46:28

@JFK这应该是一个更精确的答案，我没有fancybox的经验，只是检查网站，看看它是如何工作:) – sabithpocker 2012-07-19 00:51:49

我需要一个解决方案的fancybox 1.3和我的情况下，我使用的的onComplete事件来更新内容

<a class="iframe" id="fancybox-preview-card" href="about:blank"></a>

$("#fancybox-preview-card").fancybox({ 
     'height': screen.availHeight * 0.9, 
     'width' : 600, 
     'onComplete' : updatePreviewContent, 
     'overlayShow': false 
    }); 

... 

var contentUpdated = false; 

function previewEcardTemplate() { 
    contentUpdated = false; 
    $("#fancybox-preview-card").attr("href", "about:blank").trigger("click"); 

} 

function updatePreviewContent() { 
    // if content has already been updated then back out 
    if (contentUpdated) 
     return; 

    contentUpdated = true; 

    $.get('/template/mytemplate.htm', function (data) { 
     // Any mods to the html can go here 
     var ifrm = document.getElementById('fancybox-frame'); 
     ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument; 
     ifrm.document.open(); 
     ifrm.document.write(data); 
     ifrm.document.close(); 
    }) 

}

来源

2013-10-24 11:53:38 RadarBug

您可以尝试的数据属性（数据的fancybox标题）并初始化fancybox将其置于顶部，如下所示：

$(".fancybox-video").fancybox({ 
 
    helpers : { 
 
    title: { 
 
     type: 'inside', 
 
     position: 'top' 
 
    } 
 
    } 
 
});

<a href="#" class="fancybox-video" data-fancybox-title="<h1>Title</h1><div>Other stuff</div>" data-fancybox-type="iframe" data-fancybox-href="https://www.youtube.com/XXXXX"></a>

您可以在这里找到更多的信息：Fancybox Instructions

来源

2016-08-31 23:42:00 Eugen

如何将其他内容放入fancybox iframe中

回答

相关问题