追加到iframe头的链接

我想将元素追加到iframe（fancybox）的头部

有一个奇怪的问题：当我使用Firefox将Breakpoint元素添加到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); 

UPDATE

我也尝试这个代码

 var $head = $("#fancybox-frame").contents().find("head"); $head.append($("", { rel: "stylesheet", href: "/themes/furniture/css/test.css", type: "text/css" } )); 

但它也不起作用

TNX

Answer 1

好吧，在加载iframe和查找内部元素之间，看起来确实是一种竞争条件（正如olsn在其评论中指出的那样），如果第二次出现，则会失败;）

作为一种变通方法，您可以使用.load()方法等待iframe完全加载，然后再尝试append样式表append到部分。

这段代码应该可以解决问题：

 $(document).ready(function () { $(".fancybox").fancybox({ "type": "iframe", "onComplete": function () { var $style = ''; $("#fancybox-frame").load(function () { $(this).contents().find("head").append($style); }); } }); }); 

注意 ：这适用于fancybox v1.3.4。 幸运的是，v2.x包含比v1.3.4更灵活的公共方法来解决这个问题，比如afterLoad和beforeShow

还要注意setTimeout()也可以工作，但它渲染很奇怪。