如何在 import.io Connect Extract 中包含 CSS答案

【问题标题】：How to Include CSS in import.io Connect Extract如何在 import.io Connect Extract 中包含 CSS
【发布时间】：2015-05-13 16:23:13
【问题描述】：

使用 import.io 连接器，我能够从源网站中提取一段 html。此结果以“html”类型返回。结果是单个数据表，其样式在正文 html 中定义但未提取。这导致提取的 html 段以 NO 样式显示并且看起来很糟糕。

有没有办法包括提取 CSS 样式，即源 html 中包含多个 css href，例如

<link rel="stylesheet" href="http://cdn.ideamelt.com/1.3/css/ideamelt.min.css">

同时还要包含如下动态css：

<style type="text/css">
#financials-iframe-wrap {
    width: 635px
}
.td_genTable table {
    border: none
}
tr.net {
    font-weight: bold;
    border-top: 1px solid #009EC2
}
.td_genTable td {
    border: 0;
    padding: 0
}
a.h3-link {
    color: #ffffff;
    text-decoration: underline;
    float: right
}
</style>

...在连接器提取中，以便可以正确设置和显示生成的 html 段？

提前致谢！

【问题讨论】：

标签： html css connector import.io

【解决方案1】：

这是一个相当有趣的用例。

您可以使用 //link 和 //style 等自定义 xpath 将链接和样式元素提取为 html

然后您可以将它们输出到您的页面 HTML 中，这将从页面中导入 css 文档，并且应该包含样式。

（请注意，相关网站可能不希望您将其 css 用于其他网站，因此他们可能会阻止将 css 下载到托管在不同域中的网站）

【讨论】：

【解决方案2】：

抱歉，我不熟悉Import.io。
有没有办法从样式中获取链接和内容的引用？你在用javascript吗？
如果是这样，那么您可以使用以下 js 函数将您的样式包含到目标文档中：

// Include css from 'style' tag
function include_css (src) {
    var _head = document.head || document.getElementsByTagName('head')[0] || document.documentElement,
        style = document.createElement ('style');

    style.setAttribute ('type', 'text/css');
    if (style.styleSheet){
        style.styleSheet.cssText = src;
    } else {
        style.appendChild (document.createTextNode (src));
    }

    _head.appendChild (style);
}

// Include css referred by 'link' tag
function include_link (ref) {
    var _head = document.head || document.getElementsByTagName ('head')[0] || document.documentElement,
        style = document.createElement ('link');

    style.setAttribute ('rel',  'stylesheet');
    style.setAttribute ('type', 'text/css');
    style.setAttribute ('href', ref);
    _head.appendChild (style);
}

【讨论】：