附加链接到iframe的头 [英] Appending Link To Head Of Iframe
问题描述
我想将元素附加到Iframe（fancybox）的头部
有一个奇怪的问题：当我使用Firefox到Breakpoint到头它正常工作，但当我正常运行网站没有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（$（< link />，
{rel：stylesheet，href：/themes/furniture/css/test.css，type：text / css}））;
但不起作用
Tnx
好吧，它似乎是一个赛车的条件确实（正如olsn 在他的评论中）在加载iframe和在其中发现元素之间，如果第二次发生第一次失败）;
作为解决方法，您可以使用 .load（）方法等待 iframe 在尝试将附加附加到< head> 部分之前完全加载
这段代码应该做的：
$（document）.ready（function
$（。fancybox）。fancybox（{
type：iframe，
onComplete：function（）{
var $ style ='&链接rel =stylesheethref =/ themes / furniture / css / test.csstype =text / css/>';
$（＃fancybox-frame）。load ）{
$（this）.contents（）。find（head）。append（$ style）;
}）;
}
}）;
}）;
注意：这是fancybox v1.3.4。幸运的是v2.x包括比v1.3.4更灵活的公共方法来避开这个问题，比如 afterLoad 和 beforeShow p>
还要注意， setTimeout（）也可以工作，但会奇怪。
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
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.
这篇关于附加链接到iframe的头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
