如何在另一个页面的 iFrame 中动态更改 HTML 页面的样式表？答案

【问题标题】：How to dynamically change the stylesheet of an HTML page within an iFrame of another page?如何在另一个页面的 iFrame 中动态更改 HTML 页面的样式表？
【发布时间】：2024-01-22 02:21:01
【问题描述】：

我有一个使用 jQuery UI 主题的网页。在此页面中，有一个 iFrame 包含另一个 HTML 文档，该文档也使用了 jQuery UI 主题。现在，我制作了自己的主题选择器，我想知道让它影响 iFrame 中页面的最简单方法。例如，每当用户选择一个新主题时，我都会简单地执行以下操作：

<link id="uiTheme" rel="stylesheet" type="text/css" href="ui/smoothness.css" />
$("#uiTheme").attr("href", "ui/" + newTheme + ".css");

其中newTheme 是不同它们的字符串文字（全部通过选择框完成，我知道这一切都有效等等）。现在，如何更改框架内使用的工作表以匹配主页？我想我的问题是如何使用 jQuery 选择器来获取 ID 为 innerTheme 的链接以将其 href 属性更改为相同的样式表？此外，我是否甚至需要担心这一点，或者外部页面的 ui 主题会自动下降到框架中，而框架页面本身没有链接到样式表？

如果我的问题有点令人困惑，我深表歉意。如果需要，我可以尝试清除任何东西。

【问题讨论】：

它们是否在同一个域中？
是的，它们都在同一个域中。

标签： jquery css inheritance iframe stylesheet

【解决方案1】：

您不必获取对其链接元素的引用 - 只需添加您自己的，它将覆盖。

var link = document.createElement('link');
link.href = "http://full.domain.com/ui/smoothness.css";
link.type = 'text/css';
link.rel = 'stylesheet';
$('head', frameName )[0].appendChild(link);

但是，如果它来自另一个域，您将无法修改其他框架中的任何内容。因此，如果它是从同一个域提供的 - 在原始页面上进行更改可能会更容易。如果它来自其他网站 - 很遗憾，你运气不好。

【讨论】：

最后一行代码是我想找的。我不知道选择器的第二个参数是 iframe 的“名称”，而不是 ID 或其他东西。我认为像$("#innerTheme", "myFrame").attr("href", "ui/" + newTheme + ".css"); 这样<iframe id="myFrameID" name="myFrame"></iframe> 会起作用，对吧？
第二个参数是选择器应该匹配的上下文。默认情况下，当您为框架提供 id 时，会创建一个具有相同名称的*对象。你也可以使用 $('head', $('#myFrameID'))。

【解决方案2】：

这里有一些代码，希望能帮到你一点：它循环通过 iframe 样式表打开/关闭它们

javascript: var i=0;
for(var j=0;j < window.frames.length;j++){
  cs=!window.frames[j].document.styleSheets[0].disabled;
  for(i=0;i<window.frames[j].document.styleSheets.length;i++) 
    window.frames[j].document.styleSheets[i].disabled=cs;
};
void(cs=true);

代码基于 Bookmarklet 来打开/关闭 CSS here

【讨论】：

这有点用，虽然它似乎只是切换样式表，而不是从 30 个不同的 jQuery UI 主题列表中选择。