Question

我正在尝试加载远程xhtml页面的内联样式内容。我以前使用过load，但是这不起作用，因为它在body标签内加载了css。因此，我正在尝试将样式附加到页面的head标签。

问题是我无法使用jQuery选择样式标记。这是我的代码：

            jQuery.get(contenturl, function(data) {
                var css = jQuery(data).find('style').html();
                alert(css);
            });

css变量始终为null。有什么想法吗？

谢谢，皮特

Answer 1

来自jQuery manual：

jQuery（html，[ownerDocument]）

通过创建没有属性的简单元素，例如“<div />”   使用document.createElement。通过分配字符串来解析所有其他情况   到div元素的.innerHTML属性。 HTML字符串不能包含   div中无效的元素，例如 html，head，body，   或标题元素。

因此，将页面的完整HTML传递给jQuery（）函数不起作用。（虽然它实际上适用于Opera，但我想你想要一个跨浏览器解决方案。）

我建议使用简单的正则表达式从<style>标签获取CSS：

jQuery.get(contenturl, function(data) {
  var styles = data.match(/<style.*?>[\s\S]*?<\/style>/ig);
  $("head").append(styles.join(""));
});

这也应该比创建整个DOM树快得多。

Answer 2

请记住，这仅适用于本地文件。要使用远程文件执行此操作，您需要具有与jQuery脚本通信的本地PHP脚本。

以下视频教程演示了如何设置本地php文件以执行此操作：http://sampsonvideos.com/video.php?video=24

选择远程页面的样式标签？

2 个答案: