Javascript jQuery css附加到iframe的瞬间

因此，我制作了一个页面，其中用户有多个链接，当用户单击链接时，iFrame会更改src并向用户显示内容

现在我得到了这个css文件，它应用于iframe中的每个页面，而不是将css文件应用于每个其他页面（可能很多），我想我将css附加到iframe中

但是，它只在您离开页面时起作用，并且您可以在一瞬间看到css

这是我的密码：

$(document).ready(function() { 
    //The iframe
    var frameContent = $("#frameContent");    

    $(".SideMenuWrapper a").each(function() {

        //Gets the href for each link so we dont have to write a click event for all the links
        var href = $(this).attr("href");

        $(this).click(function(e) {         
            e.preventDefault();          

            //Applying the css to the iframe
            var head = frameContent.contents().find("head");
            head.append($("<link/>", {rel : "stylesheet", href : "../lib/css/gui.css", type: "text/css"}));

            frameContent.attr('src', href);          
        });
    });  
});

$（文档）.ready（函数（）{
//iframe
var frameContent=$（“#frameContent”）；
$（“.SideMenuWrapper a”）。每个（函数（）{
//获取每个链接的href，这样我们就不必为所有链接编写单击事件
var href=$（this.attr（“href”）；
$（此）。单击（函数（e）{
e、 预防默认值（）；
//将css应用于iframe
var head=frameContent.contents（）.find（“head”）；
append（$（“”，{rel:“样式表”，href:“../lib/css/gui.css”，键入：“text/css”}））；
frameContent.attr（'src'，href）；
});
});  
});

---

我已经尝试在

frameContent.attr（'src'，href）下移动head append但这似乎也不起作用。
在我看来，您应该使用iframe的onload事件：

$(document).ready(function () {
    //The iframe
    var frameContent = $("#frameContent");
    $('.SideMenuWrapper a').click(function (e) {
        e.preventDefault();
        //Gets the href for each link so we dont have to write a click event for all the links
        var href = $(this).attr("href");
        //Applying the css to the iframe

        frameContent.on('load', function () {
            var head = $(this).contents().find("head");
            head.append($("<link/>", {
                rel: "stylesheet",
                href: "../lib/css/gui.css",
                type: "text/css"
            }));
        }).attr('src', href);
    });
});

$（文档）.ready（函数（）{
//iframe
var frameContent=$（“#frameContent”）；
$（'.SideMenuRapper a'）。单击（函数（e）{
e、 预防默认值（）；
//获取每个链接的href，这样我们就不必为所有链接编写单击事件
var href=$（this.attr（“href”）；
//将css应用于iframe
frameContent.on（'load'，function（）{
var head=$（this.contents（）.find（“head”）；
head.append（$（“”）{
rel:“样式表”，
href:“../lib/css/gui.css”，
键入：“文本/css”
}));
}).attr（'src'，href）；
});
});
为什么要在每个循环内触发单击？@A.Wolff这应该是注释对不起。不管有没有，效果都是一样的，谢谢！也谢谢你让我的链接更有效率！只有一件事，这取决于您正在寻找的行为，并且不确定每个浏览器如何处理它，但可能会更准确：
frameContent.one（'load'，…）
而不是在（）上使用
on
。如果您切换iframe，我会在不同浏览器上测试时记住这一点，谢谢