Question

我想将元素追加到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);

更新

我也试试这段代码

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

但它不起作用

TNX

Answer 1

嗯，在加载iframe和查找内部元素之间确实似乎是一个竞争条件（正如olsn在他的评论中指出的那样），如果第二次出现则会失败;）

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

这段代码可以解决问题：

$(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()也可以正常工作，但却会产生奇怪的现象。

追加到iframe头的链接

1 个答案: