iframe中css无效

Posted 2023-04-26

我在WEB上写了一个页面，A.html
在A.html中iframe了页面B.jsp
但是当我打开A的时候，会发现B中的css效果失效，本来设定为14px的字体没有出现
我在A.html页面中有：
<link rel="stylesheet" type="text/css" href="../css/cdzx_css.css" />

然后再B.jsp中有：
<link rel="stylesheet" href="../css/center.css" type="text/css" />

css的内容并没有问题，
以为我在IE上就显示正常，
但是在搜狗浏览器中就显示css失效，当我刷新一遍页面之后css就有效果了
请问这是什么原因？
该怎么解决
单独打开B页面看的时候css是有效果的
但是我痛苦的是我在A.html中其实是
iframe了页面B.jsp和C.jsp两个页面的（使用javascript点击button修改iframe的src）
当我一开始打开A的时候iframe的是B，如果这个时候css失效，我刷新页面，css生效。但是当我切换成C的时候，C页面的css还是失效的，我在换回B页面，发现也失效了。。。。。。
B和C页面的css的link是一样的

参考技术A 建议你把CSS写在一个文档中。

例如B.JSP 用的是B.css C.JSP用的是C.css 可以把这俩CSS都放在HTML那个CSS例如html.css里面。

如需特别定义，可以在html.css里定义，如有冲突，可以加个iframe在前面。

例如1.html里面有class=“same”，B.JSP里也有。

那么，你可以通用.same定义样式。
B.JSP这个iframe样式可以用iframe来定义，B.JSP里的same类如和1.html样式不同，可以用
iframe .same再定义。

这样整个也清晰。 参考技术B 你单独打开B页面看看CSS是否有效果，如果你在搜狗浏览器中刷新一下就有了，可能是缓存的问题。追问

单独打开B页面看的时候css是有效果的
但是我痛苦的是我在A.html中其实是
iframe了页面B.jsp和C.jsp两个页面的（使用javascript点击button修改iframe的src）
当我一开始打开A的时候iframe的是B，如果这个时候css失效，我刷新页面，css生效。但是当我切换成C的时候，C页面的css还是失效的，我在换回B页面，发现也失效了。。。。。。
B和C页面的css的link是一样的

追答

你把href="../css/center.css"改成href="css/center.css"试试。(HTML文件和CSS文件夹在同一个目录下)

如何将 css 样式应用到 iframe 内容中？ [复制]

【中文标题】如何将 css 样式应用到 iframe 内容中？ [复制]

【英文标题】：How to applying css style into an iframe content? [duplicate]

【发布时间】：2013-03-26 15:07:12

【问题描述】：

我正在尝试为 iframe 中的内容应用 CSS 样式，请查看此链接 http://jsfiddle.net/pPqGe/

jQuery:

$(document).ready(function() 
    $('iframe').contents().find('h1').css('color','red');
);

HTML：

<iframe src="mysite"   id="myframe"></iframe>

对于 iframe 源，我使用了一个实时网站。

【问题讨论】：

您可以将它们作为查询字符串传递给 iframed 页面。

shnisaka 是对的，否则是不可能的。出于安全原因，浏览器带有该限制，称为“跨域脚本”。

如果您正在调用位于同一域中的另一个网页，则只需使用 ajax 调用该页面内容。

【参考方案1】：

它有效。问题是没有H1，只有H2。 查看此链接http://jsfiddle.net/pPqGe/1545/。

HTML：

<iframe src='jsfiddle.net'></iframe>

JavaScript：

$(document).ready(function() 
    $('iframe').contents().find('h2').css('color','red');
    $('iframe').contents().find('#header').css('opacity','.2');
);

【讨论】：

是的，你是对的。它在 jsfiddle 中运行良好，但我正在为 iframe 使用另一个源文件。 例如：" " 不支持。。标题类在smasingmagazine上可用，但不受影响。