1

我想将元素附加到 Iframe 的头部（fancybox）

有一个奇怪的问题：当我在将元素附加到 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" } ));

但它也不起作用

肿瘤坏死因子

4

1 回答 1

1

好吧，在加载 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 更灵活的公共方法来规避这个问题，比如afterLoad和beforeShow

另请注意，它setTimeout()也可以工作，但呈现奇怪。

于 2013-04-26T23:10:44.077 回答