我想将元素追加到 Iframe 的头部(花式框)
有一个奇怪的问题:当我在将元素附加到 Head 的代码行上使用 Firefox 断点时，它可以正常工作，但是当我在没有 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" } ));
但是还是不行
谢谢
最佳答案
好吧，这似乎确实是加载 iframe 和在其中查找元素之间的竞争条件(正如 olsn 在他的评论中指出的那样)，如果第二个先出现，则失败 ;)
作为解决方法，您可以使用 .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 更灵活的公共(public)方法来规避这个问题，比如 afterLoad和 beforeShow
另请注意 setTimeout()也可以工作，但它呈现得很奇怪。
关于javascript - 将链接附加到 iframe 的头部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16241296/