Appending Link To Head Of Iframe

I want to append element To head of an Iframe (fancybox)

there is a strange problem : when I use Firefox to Breakpoint on line of code that append element to Head it works correctly but when I run site normally without firebug it does not work;

I am using fancybox 1.3.4 and the code run in onComplete event

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

I also try this code

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

but it does not work either

Tnx

标签： javascript jquery css iframe fancybox

1条回答

爷的心禁止访问

2楼-- · 2019-06-07 21:01

Well, it seems to be a racing condition indeed (as pointed out by olsn in his comment) between loading the iframe and finding elements inside of it, which fails if the second occurs first ;)

As a workaround, you could use the .load() method to wait for the iframe to be completely loaded before trying to append the stylesheet to the <head> section.

This code should do the trick :

$(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);
            });
        }
    });
});

Note : this is for fancybox v1.3.4. Fortunately v2.x includes more flexible public methods than v1.3.4 to circumvent this issue, like afterLoad and beforeShow

Also notice that setTimeout() will work too, but it renders oddly.

0人赞添加讨论(0) 举报

Appending Link To Head Of Iframe

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间