Question

我有以下文件：

<html>
<head>
<title></title>

<script type="text/javascript" src="/Prototype.js"></script>
<script type="text/javascript">
function load_content()
{
  new Ajax.PeriodicalUpdater('content', '/UpdatedContent/,
  {
    method: 'post',
    frequency: 5
  });

  //var fileref = document.createElement("link");
  //fileref.setAttribute("rel", "stylesheet");
  //fileref.setAttribute("type", "text/css");
  //fileref.setAttribute("href", filename);
}
</script>

</head>

<body>

<div id="content"></div>

<script type="text/javascript">
    load_content();
</script>

</body>
</html>

来自UpdatedContent的内容应该每5秒加载到“content”div中。奇怪的是HTML已加载但加载页面顶部的部分在插入“内容”时被完全剥离

加载的页面基本上是这样的：

<style type="text/css"> 
 ... lots of css here ...
</style>

... lots of HTML here ...

没有，

CSS不能直接注入div吗？原型框架或浏览器的DOM是否正在剥离CSS？

如何在不进行单独调用的情况下包含CSS？

从给定的主文件中可以看出，页面将完全空白，而“content”div中没有任何内容。这是故意的。我基本上想要将其用作动态加载间隔更新内容的结构，这样页面就不必完全重新加载来刷新数据。

不，我不能将CSS硬编码到上面的文件中，因为CSS也会改变。

编辑：关于yaauie's response ...现在我知道它为什么会发生，因为我将风格和内容整合在一起。如果我将CSS分成可以加载的单独文件，我将如何通过AJAX（最好使用Prototype）加载它，然后更重要的是，将CSS设置为页面内容的样式表？

Answer 1

<style>代码仅允许HTML和XHTML的<head>，而不是<body>或其任何后代。 Web浏览器在文档的初始解析中倾向于相当宽容，但是当更改innerHTML时，我希望浏览器会忽略任何<style>元素，因为那里不期望那种元素。

作为一种解决方法，是否可以在您的响应中使用inline-CSS，即使用您传递的HTML元素的style=""属性？

编辑：要将CSS添加到<head>，需要以下两种方法之一：

两次往返服务器：
包含两者并且可以在插入之前解析的响应

在这种情况下，我建议在发送之前将两部分编码为JSON对象。您对AJAX操作的回调应该拆分它们并将它们附加到适当的位置（首先设置样式以避免屏幕抖动）

{"style":"\ndiv#ajax7373 a {\n  color:#fff;\n  text-decoration:underline;\n  font-weight:bold;\n  \n}\ndiv#ajax7373 {\n  background-color:#ff1cae;\n  color:#ff6ccf;\n}","object":"\n<div id=\"#ajax7373\">\n\tThere is the contents of your div and a <a href=\"#\">link<\/a>\n<\/div>\n"}

也就是说，我发现很难相信应用程序如此强烈地支持样式/内容分离，并且正在采用一种方法，其中样式必须由内容生成。为什么不对整个域进行样式化，包括AJAX请求的预期返回？ AJAX请求的项目是否真的会在结构/样式上有足够的差异来保证这一点？

Answer 2

对于生成的CSS，您不熟悉内联样式，或者您必须为所需的所有各种样式编写大量的类名，这样您仍然可以分离出样式。然后你可以通过JS改变类名。

CSS从通过Javascript嵌入的内容中删除到Div

2 个答案: