猿问

从 HTML 文件导入 CSS 作为外部 CSS

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

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

由于我无法上传 CSS 文件，我想也许我可以在 CMS 内创建一个仅包含 CSS 的虚拟站点，然后将该站点导入为 CSS。 这个想法是：解析时，网站的 HTML（标题、正文等）将被跳过（当 CSS 具有即类型错误时），而找到的任何有效 CSS 将被导入。

现在，当我尝试导入该网站时

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

（因为 CMS 也不允许我访问页面标题），我当然得到了错误：

“资源解释为样式表，但使用 MIME 类型 text/html 进行传输”

因为我显然请求的是 HTML 文件而不是 CSS 文件。

我还尝试使用 jQuery 将所有虚拟 HTML 简单地包含到一个元素中（我不会显示该元素）：

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

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

主线程上的同步 XMLHttpRequest 已被弃用，因为它会对最终用户的体验产生不利影响

通过 document.write 调用解析器阻止的跨站点（即不同的 eTLD+1）脚本 ["..."]。由于网络连接不良，此脚本的网络请求可能会在此或将来的页面加载中被浏览器阻止。如果在此页面加载中被阻止，则会在后续控制台消息中进行确认。

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



慕虎7371278
浏览 109回答 3
3回答

哈士奇WWW

我认为最好的选择是将 HTML 页面加载到 iframe 中，从 iframe 中查询样式，然后将其附加到当前文档。除了<style>块之外，不会从 HTML 中复制任何内容。不过，外部 HTML 文档必须是实际的 HTML 文档 ( <html><head><style>....)，否则将无法查询页面以检索 CSS。这是纯 JavaScript 中的示例：// Create an iframeconst iframe = document.createElement("iframe");// Make it not visibleiframe.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 processiframe.src = "css.html";// The <iframe> doesn't actually load until it is appended to a documentdocument.querySelector("body").appendChild(iframe);
0

慕标5832272

它可以以不同的方式实现。然而不是通过JS，而是PHP include然而，为此，您的服务器需要支持 PHP，并且需要使用 PHP 而不是 HTML 作为文档。现在听起来比实际情况更复杂。要使用 PHP，必须.php在末尾调用该文档，而不是.html例如index.php。文档本身的编写方式与编写 HTML 网站的方式完全相同。现在使用 PHP include 来解决这个问题。你将 CSS 包含为头部样式：索引.php：<html>&nbsp; <head>&nbsp; &nbsp; <?php&nbsp;&nbsp; &nbsp; &nbsp; include('styles.css');&nbsp; &nbsp; ?>&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; content&nbsp; </body></html>该行<?php include('url'); ?>会将 url 服务器端提到的文件加载到文档中。因此，您只需要创建另一个具有该名称的文件styles.css，并以正常方式在其中写入 css 即可。
0

森栏

你做<link&nbsp;rel="stylesheet"&nbsp;href="css/style.css">
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答