附加链接到Iframe的头部

Appending Link To Head Of Iframe

本文关键字：头部 Iframe 链接      更新时间：2023-09-26

我想添加元素到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()也可以工作，但它呈现奇怪。

相关文章：