时间戳

首页 > 解决方案 > 如何设计一个应用程序来从给定的 URL 更改网站的 CSS 文件？

html - 如何设计一个应用程序来从给定的 URL 更改网站的 CSS 文件？

问题描述

我想制作一个类似于 Stylish 扩展程序和 google chrome 检查器的应用程序。是否可以制作这样的东西但不是作为扩展而是作为单独的服务工作？

我已经完成了基于 react 的客户端应用程序，其中包含要更改的元素的菜单，例如我可以选择字体类型、字体大小、颜色等。在菜单旁边，我有 iframe，它显示来自 url 的站点 - 我的想法是下载服务器端的整个网页，在 nginx 上使用 docker 部署它以提供服务并将我的新 url 发送回客户端。有没有更简单的方法呢？

我还完成了基于 spring 的简单后端应用程序，它将整个网页下载到文件夹中。这个应用程序中最重要的是生成单独的 CSS 文件，以后可以将其包含到给定的网页中。

我遇到了几个问题：

  1. 如何从 url 显示网站，如果使用 iframe，如何更改给定网站的 CSS？
  2. 如何立即显示更改的 CSS？

你是如何得到任何想法或提示的？

标签： htmlcssspringarchitecture

解决方案

要切换样式表，请给链接元素一个 id 以便您可以引用它，然后重置其 href，即

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

function setTheme(themeName) {
  let stylesheetUrl = 'style/' + themeName + '.css';
  document.getElementById('themeStyles').setAttribute("href", stylesheetUrl);
}

如果 iframe 中托管的页面与 iframe 来自同一个域，那么这很容易通过跨框架脚本完成。

推荐阅读