【问题标题】:jQuery - Loading content into div, styles not applied?jQuery - 将内容加载到 div 中,样式未应用?
【发布时间】:2010-04-16 05:02:56
【问题描述】:

我正在尝试让这个内容加载器工作,并且我已经设法让它获取新内容,一旦加载了内容,它的样式就不正确了。字符“é”也变成了问号。文档类型问题?以及通常应用了 Cufon 的 h2 标签不会触发。

所以基本上,这个内容加载器要求我有一堆基本相同的页面,除了我想要重新处理的内容。这样,用户就可以像您通常期望的那样使用实际的 URL。仅当在已加载页面上单击链接时,才会真正替换 #content div 中的内容。

我可以在这里发布代码,但我认为最好只是在测试页上观看它。顺便说一句,它的图形非常低;)

http://www.matkalenderen.no

只需单击蓝色文本链接,您就会看到它。此外,第二个加载内容上的红色按钮应该将内容恢复到以前的内容。但它没有被触发或什么的。发生了什么事?

【问题讨论】:

    标签: jquery html css ajax


    【解决方案1】:

    是因为 new_user.php 是一个 ISO-8859-1 文件。

    XMLHttpRequest,用于获取页面,默认为UTF-8。由于XMLHttpRequest不了解HTML,它会忽略你用来声明该编码的<meta>标签,并继续使用UTF-8,导致无法读取编码为单个非编码的é -UTF-8 字节。

    您应该让您的脚本发回一个真实的header('Content-Type: text/html; charset=ISO-8859-1');,浏览器的 HTML 解析器 XMLHttpRequest 都可以理解,或者 — 可能更好 — 只使用 UTF-8地点。然后,您可以来回发送任何 Unicode 字符,而不仅仅是来自 Latin-1 的几个重音字母。

    样式对我来说看起来不错。我能看到的唯一区别是新加载的内容没有字体替换。发生这种情况是因为字体替换的东西只在页面加载时运行。您可以在加载新页面后调用Cufon.replace('h2'); 再次对新标题进行替换,或者考虑嵌入@font-face,它开始接管这种事情。

    【讨论】:

    • 嗯,有没有可能我可以调用 Cufon.now() 作为整个内容获取程序的一部分?这不像将 Cufon.now() 添加到执行 fetchin 的 js 部分那么简单?这些函数可以像这样在js中互相调用吗?说实话对js不太熟悉..
    • 另外,请注意,单击第一个链接“registrer ny”后,单击新加载的红色按钮不会执行任何动画来替换内容。这只是一个普通的旧 href 链接。它应该做同样的事情,淡出现有内容,然后加载新内容。
    • 嗯,是的,那是因为您没有将任何脚本行为绑定到按钮。控制该行为的<script> 元素是永远不会加载的new_user.php 页面的一部分。即使您确实将它包含在content div 中,将<script> 元素加载到页面中也是非常不可靠的跨浏览器。您最好将所有控件内容写入单个静态.js 文件,并在所有页面之间共享。您可以使用 jQuery 的 live 方法要求它在添加到页面时自动绑定到匹配的新元素。
    • 我没有将任何脚本行为绑定到按钮吗?它应该是的。我的意思是,脚本仍然在页面中激活,不是吗?主页和 new_user.php 页面中都有脚本。
    • 不,执行绑定的“js.js”脚本位于您正在加载的 #content div 之外。 (实际上,出于某种原因,它甚至在<body> 之外。)即使您将其放在#content 内,通过innerHTML 将<script> 元素加载到页面中也是非常不可靠的,应该避免。 jQuery 尝试使用一些技巧使其跨浏览器工作,但并非在所有情况下都成功。更好:在 js.js 中使用 $('#container a').live('click', function() { ... }); 以便在加载时自动获取容器中新添加的链接。
    【解决方案2】:

    您没有doctype 问题,您有character encoding 问题。

    【讨论】:

    • 实际上,改成 utf-8 并没有真正改变任何东西。我错过了什么吗?
    • 您必须以 UTF-8 编码实际保存您的 PHP 文件,而不仅仅是更改 meta 标签。 (如果你的文本编辑器不能给你这个选项,那么你可以写é,但在这种情况下你真的需要一个更好的文本编辑器。)
    猜你喜欢
    • 1970-01-01
    • 2012-06-29
    • 2011-09-14
    • 1970-01-01
    • 1970-01-01
    • 2018-10-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多