2

我目前正在为论坛 (diskusjon.no) 制作自定义 CSS，但我一直在努力处理页面的某个部分。IPBoard-forum 中的编辑器是原始 html-tag 中的 html-tag，而我通过扩展Stylish设置的 CSS没有到达页面的这一部分。

结构是这样的：

<<html> <---lots of tags--> <iframe> <html> <body contenteditable=true>

现在我的风格会影响除了第二个 html-tag 之后的所有内容，所以我的问题是；- 当我通过 Stylish 添加我的 CSS 时，是否有可能到达页面的这一部分。即我无权访问任何 HTML。

这是我正在谈论的部分的 Google Inspector 的图片：

4

2 回答 2

2

由于该<iframe>标签旨在加载外部页面，因此它将拥有自己的样式表。然后，你的风格不能干扰它。

解决方案是在页面加载到 iframe 后使用 javascript。你可以参考这篇：How to apply CSS to iframe? 问题。

于 2011-12-01T23:56:00.117 回答
1

无论页面是否在 iframe 中，Stylish 都会以相同的方式对待页面。因此，解决方案就是单独设置 iFramed 位的样式。

例如，假设您有页面jsbin.com/osajuz/edit，它包含这个 iFrame：

<iframe src="http://www.drudgereport.com/"></iframe>

然后你可以创建一个时尚的风格，如：

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://jsbin.com/osajuz") {
    body {
        background-color: pink;
    }
}

@-moz-document url("http://www.drudgereport.com/") {
    body {
        background-color: lime !important;
    }
}

哪个有效。

如果您创建样式并访问jsbin.com/osajuz，您将看到如下内容：

iFrame 样式预览

同样，如果框架没有 URL，则将其视为来自与包含页面相同的域和 URL 的页面。时尚的规则仍然适用。

例如，如果您创建此 Stylish 样式：

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("jsbin.com") {
    body {
        color: orange;
    }
}

@-moz-document url-prefix("http://jsbin.com/abazay/3/edit") {
    body {
        background: lime;
    }
}

然后访问jsbin.com/abazay/3/edit#preview，您将看到两种样式都应用于两个“内部”iFrame。

但请注意，如果您不小心，任何 JS 操作 iFrame 都可能覆盖 CSS 样式。因此，请自由使用!important标志来解决这个问题。

于 2011-12-02T00:59:54.600 回答