从 HTML-file 作为外部 CSS 导入 CSS

Question

如标题所示，我想 将 HTML-file 作为外部 CSS 导入网站。请听我说完：我的问题是我正在使用一个非常不方便的 CMS，它不允许我上传 CSS-files 无论如何。

我可以通过 HTML-style-tag 直接在页面内写入 CSS，但这会在每个站点上生成大量文本，并且还会使维护 CSS 变得乏味。

因为我无法上传 CSS-files，我想也许我可以在 CMS 中创建一个 dummy-site，只有 CSS然后将该站点导入为 CSS。 想法是：在解析时，网站的 HTML（header、body 等）将被跳过（当 CSS 有即 type-errors) 而找到的任何有效 CSS 将被导入。

现在，当我尝试使用

导入该网站时

<style type="text/css">   @import url(dummyCSSWebsiteURL); </style>

（因为 CMS 也不授予我访问页面 header 的权限），我 - 当然 - 得到错误：

"Resource interpreted as Stylesheet but transferred with MIME type text/html"

因为我显然要求 HTML-file 而不是 CSS。

我还尝试 jQuery 将所有 dummy-HTML 简单地包含到一个元素中（我不会显示）：

$("#cssDummy").load(dummyCSSWebsiteURL);

但我收到 2 个错误，这可能只是表明这是一个多么低效的想法：

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience

A parser-blocking, cross site (i.e. different eTLD+1) script, ["..."], is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message.

也许我只是在概念层面上完全忽视（或不理解）事物，但我仍然想知道是否有解决此问题的方法？

编辑：我找到了解决方法

绝对不推荐。如果可以，请尝试使用评论中指出的不同服务器。我使用 XMLHttpRequest 获取外部站点的 HTML，然后使用正则表达式匹配包含 css 的页面上 div 的内容，并且添加了 style-tags -将匹配的 css 插入页面上的 div。

包含 CSS:

的外部站点代码

<div id="generalCode">.testBox{background-color: red; min-height: 200px;}</div>

导入外部文件的站点代码CSS:

<div class="testBox">
</div>  
<div id="cssCodeOnPage">
</div>

<script>
// use onload if you want
getCssCode();

function getCssCode(){
  // send request to page where div #generalCode contains css
  var xhr = new XMLHttpRequest();
  xhr.open('GET', dummyCSSWebsiteURL);

  xhr.onload = function(){
     // use regex to separate css from rest of html
     var re = /<div id="generalCode">([\s\S]*?)<\/div>/;
     var cssString = xhr.response.match(re)[1];
     cssString = "<style>" + cssString +"</style>";
     // insert css into div
     var cssDivOnPage = document.getElementById('cssCodeOnPage');
     cssDivOnPage.innerHTML = cssString;
} 
  xhr.send();  
}

（对不起，这个问题太可怕了..）

Answer 1

它可能以不同的方式。但是不是通过 JS，而是 PHP include

为此，您的服务器需要支持 PHP 并且需要使用 PHP 而不是 HTML 作为文档。现在听起来比实际情况更复杂。要使用 PHP，文档必须在末尾调用 .php 而不是 .html，例如index.php。文档本身的编写方式与编写 HTML 网站的方式完全相同。

现在针对使用 PHP include 的问题。您将 CSS 作为头部样式：

index.php:

<html>
  <head>
    <?php 
      include('styles.css');
    ?>
  </head>
  <body>
    content
  </body>
</html>

行 <?php include('url'); ?> 会将 url 服务器端提到的文件加载到文档中。因此，您只需要创建另一个名称为 styles.css 的文件，然后以正常方式在其中写入您的 css。

Answer 2

你会

<link rel="stylesheet" href="css/style.css">

Answer 3

我认为最好的选择是将该 HTML 页面加载到 iframe 中，从 hte iframe 中查询样式，然后将其附加到当前文档。我在 Glitch here.

上创建了一个实例
只有 <style> 块将从 HTML 复制。外部 HTML 文档确实需要是实际的 HTML 文档 (<html><head><style>....)，否则页面将无法查询以检索 CSS.

这是一个简单的例子JavaScript:

// Create an iframe const iframe = document.createElement("iframe"); // Make it not visible iframe.style.visibility = "hidden"; // This will run once the HTML page has loaded in the <iframe> iframe.onload = () => { // Find the <style> element in the HTML document const style = iframe.contentDocument.querySelector("style"); // Take that <style> element and append it to the current document's <head> document.querySelector("head").appendChild(style); // Remove the <iframe> after we are done. iframe.parentElement.removeChild(iframe); }; // Setting a source starts the loading process iframe.src = "css.html"; // The <iframe> doesn't actually load until it is appended to a document document.querySelector("body").appendChild(iframe);

从 HTML-file 作为外部 CSS 导入 CSS

Import CSS from an HTML-file as external CSS

html

javascript

css

importerror