jQuery Ajax不添加< link>在< head>中IE中的标签 [英] jquery ajax not adding <link> in <head> tags in IE
问题描述
我正在通过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();
}
}
});
您确实应该使用<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 ..应该可以工作，让我知道:)
I am loading a page via AJAX and putting it in a DIV. Including HTML tags and all. No browser seems to be worried about that, except for the fact that the <head> elements never load in IE, but do so in FF.
Is it possible to let the elements in <head> to load as well, or do I have to put them in the body?
This includes <title> and <link>. But the <style> element works fine. So I can't load my external stylesheets with my Ajax. Is there a way, or do I have 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 I am making, if you would need that 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();
}
}
});
You really should use an <iframe> element to load a "complete" website (means with <html>, <body> and <head> tags. It's 100% invalid markup otherwise.
I meantioned it would be nasty work to strip, but.. woh maybe not that nasty:
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();
}
}
Delete with:
$('head').find('[data-insertID]').remove();
This would grab all nodes from the head section of your received site and put it into your actuall website. After that it gets all nodes from the <body> tag and puts those into your div.. should work, let me know :)
这篇关于jQuery Ajax不添加< link>在< head>中IE中的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
