正如标题所示，我想将 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）脚本 ["..."]。由于网络连接不良，此脚本的网络请求可能会在此或将来的页面加载中被浏览器阻止。如果在此页面加载中被阻止，则会在后续控制台消息中进行确认。也许我只是在概念层面上忽略（或不理解）事物，但我仍然想知道这个问题是否有解决方法？
3 回答
哈士奇WWW
TA贡献1799条经验 获得超6个赞
我认为最好的选择是将 HTML 页面加载到 iframe 中，从 iframe 中查询样式，然后将其附加到当前文档。
除了<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);
慕标5832272
TA贡献1966条经验 获得超4个赞
它可以以不同的方式实现。然而不是通过JS，而是PHP include
然而，为此，您的服务器需要支持 PHP，并且需要使用 PHP 而不是 HTML 作为文档。现在听起来比实际情况更复杂。要使用 PHP，必须.php在末尾调用该文档，而不是.html例如index.php。文档本身的编写方式与编写 HTML 网站的方式完全相同。
现在使用 PHP include 来解决这个问题。你将 CSS 包含为头部样式：
索引.php：
<html>
<head>
<?php
include('styles.css');
?>
</head>
<body>
content
</body>
</html>
该行<?php include('url'); ?>会将 url 服务器端提到的文件加载到文档中。因此，您只需要创建另一个具有该名称的文件styles.css，并以正常方式在其中写入 css 即可。
添加回答
举报
0/150
提交
取消