Question

我正在通过AJAX加载页面并将其放入DIV中。包括HTML标签和所有。没有浏览器似乎担心这一点，除了<head>元素永远不会在IE中加载，但在FF中这样做。

是否可以让<head>中的元素加载，或者我是否必须将它们放入体内？

这包括<title>和<link>。但<style>元素工作正常。因此我无法使用Ajax加载外部样式表。有办法，还是我必须把它放在体内？

提前致谢。

代码示例：

// 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>

我正在制作的ajax电话，如果您在答案中需要它。

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

Answer 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 ..应该可以工作，让我知道:)。

jquery ajax没有在IE中的标签中添加<link />

1 个答案: