Question

我有一个使用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-theme是否会自动下降到框架中而框架的页面本身不会链接到样式表？

如果我的问题有点令人困惑，我道歉。如果需要，我可以尝试清除任何内容。

Answer 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);

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

Answer 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

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

2 个答案: