Geek Answers Handbook

Jquery ajax does not add <link> to <head> tags in IE

I load the page through AJAX and put it in a DIV. Including HTML tags and all. The browser doesn't seem to worry about this, except for the fact that elements <head>never load in IE, but do it in FF.

Is it possible to load elements in <head>, or do I need to put them in the body?

This includes <title>and <link>. But the item <style>works fine. Therefore, I cannot load my external style sheets using Ajax. Is there a way, or do I need to put it in the body?

Thanks in advance.

Code example:

// page to load
<html>
<head>
    <link href="{$cssLink}" type="text/css" rel="stylesheet"> // doesn't load
    <style type="text/css">
    /* CSS bla does work*/
    </style>
</head>
<body>
    <div id="testPage_content" class="content">
</div>
</body>
</html>

And the ajax call that I make if you need this in your answer.

// ask for the page
$.ajax(
{
    url: "Scripts/loader.php",  
    type: "GET",        
    data: data, // created above this call
    cache: false,
    success: function (html) 
    {               
        //add the content retrieved from ajax and put it in the #content div
        $('#content').html(html);       

        // only use fading if opacity is supported          
        if($.support.opacity)
        {
            $('#loading').hide();
            $('#content').fadeIn();
        }
    }
});
+5
source share
1

<iframe> "" - ( <html>, <body> and <head>. 100% .

, , , .. , :

success: function (html) 
{               
    //add the content retrieved from ajax and put it in the #content div
    var stripped = $(html),
        head     = document.getElementsByTagName('head')[0] || document.documentElement;

    stripped.find('head').contents().each(function(index, node) {
        if(node.nodeType !== 3) {
           node.setAttribute('data-insertID', 'foobar');
           head.appendChild(node, head.firstChild);
        }
    });

    $('#content').html(stripped.find('body').contents());       

    // only use fading if opacity is supported          
    if($.support.opacity)
    {
        $('#loading').hide();
        $('#content').fadeIn();
    }
}


$('head').find('[data-insertID]').remove();

head section -. <body> div.. , :)

+3

More articles:


All Articles