我想添加元素到Iframe (fancybox)的头部
有一个奇怪的问题:当我使用Firefox对附加元素到Head的代码行进行断点时,它可以正常工作,但当我正常运行站点时,没有firebug,它不工作;
我使用的是fancybox 1.3.4和代码运行在onComplete事件
var cssLink = document.createElement("link")
cssLink.href = "/themes/furniture/css/test.css";
cssLink .rel = "stylesheet";
cssLink .type = "text/css";
var f123= document.getElementById('fancybox-frame');
var d123= f123.contentDocument || f123.contentWindow.document;
d123.head.appendChild(cssLink);
更新我也试一下这个代码
var $head = $("#fancybox-frame").contents().find("head");
$head.append($("<link/>",
{ rel: "stylesheet", href: "/themes/furniture/css/test.css", type: "text/css" } ));
但是它也不工作
Tnx
好吧,这似乎是一个竞速性的条件确实(正如指出的olsn在他的评论)之间加载iframe和查找它里面的元素,如果第二次发生失败;)
作为一种解决方法,您可以使用.load()
方法等待iframe
完全加载,然后再尝试将样式表append
到<head>
部分。
下面的代码应该能达到这个效果:
$(document).ready(function () {
$(".fancybox").fancybox({
"type": "iframe",
"onComplete": function () {
var $style = '<link rel="stylesheet" href="/themes/furniture/css/test.css" type="text/css" />';
$("#fancybox-frame").load(function () {
$(this).contents().find("head").append($style);
});
}
});
});
注意:这是为fancybox v1.3.4。幸运的是v2。x包含比v1.3.4更灵活的公共方法来规避此问题,如afterLoad
和beforeShow
还注意到setTimeout()
也可以工作,但它呈现奇怪。