坑！chrome内核浏览器下iframe与父页面加载相同css资源引起的问题

最新推荐文章于 2024-05-06 13:10:01 发布

搬砖的猿@

最新推荐文章于 2024-05-06 13:10:01 发布

阅读量1.1k

点赞数

分类专栏：补坑文章标签： css html5 javascript

本文链接：https://blog.csdn.net/qq_24719349/article/details/112430194

版权

补坑专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近工作做工单时，突然遇到了两个chrome浏览器的问题，当时排查问题的时候非常棘手，其中一个问题查阅了很多资料都没有找到合理的解释，最后通过自己写demo去尝试，发现了问题所在，这个文章就说一下这个问题及它的解决方案——chrome内核浏览器下iframe与父页面加载相同css资源引起的问题。
注：这个问题目前我测试时发现只在chrome上重现过，其他浏览器例如firefox和safari、ie等都没有重现到。

一、问题描述

首先，详细的描述一下这个问题。我们直接用demo来演示，现在我一共创建了2个html文件和2个css文件，然后利用parcel启动一个服务器以便我们调试，如下图：
在这里插入图片描述
其中几个文件中的代码分别是:

test1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style1.css" />
</head>
<body>
    <header style="height: 30px" class="bg0">头部</header>
    <iframe src="test2.html"></iframe>
</body>
</html>

test2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style1.css" />
</head>
<body>
    <header style="height: 30px" class="bg0">头部</header>
</body>
</html>

style1.css 和 style2.css 是一样的内容：

.bg0 {
    background-color: red;
    color: #FFF;
}

我们可以看到结构非常简单，test1.html中引用test2.html为iframe，其他地方两个文件均是一样的。那么我们启动webserver来重现一下问题。打开页面后可以看到：

在这里插入图片描述

目前两个页面的头部背景颜色均为红色，现在我们按F12打开浏览器开发者工具，然后定位到console控制台中通过操作 stylesheets表去改变css样式中.bg0这个class的值。我们先将父页面的头部改为蓝色，直接在console控制台输入：

document.styleSheets[0].cssRules[0].style.backgroundColor = 'blue'

接下来我们可以看到父页面的头部变成了蓝色：
在这里插入图片描述
然后我们再进入到iframe中，执行与父页面相同的操作，注意，一定要在控制中将文档指针切换到iframe页面上然后去再去执行，如下图：

然后执行完成后，问题出现，我们会发现，iframe中头部变成了蓝色，但是父页面的头部却重置回了红色，而整个过程我们并没有对父页面做任何操作，这是为什么？
在这里插入图片描述
然后，我又试了一下让test2.html去加载style2.css资源（也就是和父页面加载不同的资源路径），然后去执行与上述同样的操作后发现，并没有再出现这个问题。

由于我没有在网上找到任何的资料提供这方面的帮助，所以我大胆猜测了一下，很可能是因为：当iframe和父页面加载相同的css路径资源时，如果我们去修改其中的css stylesheets表，那么chrome浏览器会将另一个页面的stylesheets表执行刷新操作，将所有修改过的样式全部重置。（目前仅针对chrome浏览器）

二、解决方案

针对这一问题，我想到了三种解决方案。

1.在引入的css路径后面增加属性（例如时间戳等属性），然后用js去将css引用进来，如图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        const link = document.createElement('link')
        link.rel = "stylesheet"
        link.type = "text/css"
        link.href = `style1.css?tm=${new Date().getTime()}`
        document.head.append(link);
    </script>
    <!-- <link rel="stylesheet" type="text/css" href="style1.css" /> -->
</head>
<body>
    <header style="height: 30px" class="bg0">头部</header>
    <iframe src="test2.html"></iframe>
</body>
</html>

这样是利用css路径不同的特点，去避免此问题的发生。

2.使用某些打包工具，将link 引入的css文件直接写为内部样式表。例如，fis3中，可以直接在css路径后追加传参 __inline 即可将其写为内部样式表。如：（目前我使用的就是这种方式）

<link rel="stylesheet" type="text/css" href="style1.css?__inline" />

3.尽量不要用修改stylesheets表的这种方式去修改整体样式，我们可以将需要修改的样式通过style标签写入到内部样式表中，将它的优先级提高，亦可解决我们的问题。

搬砖的猿@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
坑！chrome内核浏览器下iframe与父页面加载相同css资源引起的问题

最近工作做工单时，突然遇到了两个chrome浏览器的问题，当时排查问题的时候非常棘手，其中一个问题查阅了很多资料都没有找到合理的解释，最后通过自己写demo去尝试，发现了问题所在，这个文章就说一下这个问题及它的解决方案——chrome内核浏览器下iframe与父页面加载相同css资源引起的问题。注：这个问题目前我测试时发现只在chrome上重现过，其他浏览器例如firefox和safari、ie等都没有重现到。一、问题描述首先，详细的描述一下这个问题。我们直接用demo来演示，现在我一共创建了2个.
复制链接

扫一扫