iframe里的html切换的时候屏幕会闪

Question

比如我的默认主题有个背景色，然后刚打开的时候是不会闪的，但是继续翻页封面之后那个iframe里的html会换 这个时候那个背景色就会先是白色 然后才是主题色，同样的还有字体 也会闪一下 找不到是什么原因呢

仓库地址：https://git.imooc.com/tongchuan6666/HolyBook.git
测试路径： /book/epub/test/2015_Book_RethinkingInterdisciplinarityA

Answer 1

Sam 2019-01-27 13:56:53

• 你现在碰到的问题是：翻页时有时会出现背景为白色，然后才变成灰色的情况（假设选择的是默认主题）

• 造成这个问题的原因是：

1. 你的src/views/Reader/index.vue没有设置背景色，所以会填充默认背景色：rgba(0, 0, 0, 0)，即透明色

2. 翻页时，如果出现整个章节切换，会重新加载iframe中的内容，所以会先出现透明色，再出现新章节内容

• 解决方法：为src/views/Reader/index.vue设置与当前主题相同的颜色

• 进一步深入：要设置与当前主题相同的颜色，课程源码提供一种解决方案，共分为两步：

1. 在mixins.js中添加initGlobalStyle()方法，根据当前主题动态添加css文件

2. 将src/views/Reader/index.vue根div的class改为ebook
   

• 特别说明：你的源码与课程有较大差异，你可以选择自己的实现方式，上面只是提供一种实现思路，供你参考

• 提问者 诺森德的凛冽寒风 #1

  明白了  谢谢老师

• Sam 回复 提问者 诺森德的凛冽寒风 #2

  不客气：）

Answer 2

Sam 2019-01-26 14:26:44

你好，根据你的代码，你的背景、标题和菜单栏等，都没有设置随主题切换的背景色，请仔细查看课程视频，或者阅读课程提供的源码，这里大概介绍一下场景切换的流程和原理：

1. 从localstorage中获取场景名称

2. 获取场景对应的css文件

3. 将css文件动态加载到head标签中（mixins.js中的initGlobalStyle()方法）

这里要注意的是，课程中提供的css文件对class进行了规定，也就是说必须按照css文件中的class来写，才能正确显示样式，比如电子书的Title组件，class必须为title-wrapper，如果不这样写，就无法正确加载样式，或者你可以修改课程提供的4个主题css文件

• 提问者 诺森德的凛冽寒风 #1

  你没弄对吧  还是你没看懂我的意思  那里面切换背景色后 翻页的时候有时候会闪一下  我没问怎么实现切换啊  外面的标题是还没弄切换  我问得是里面的

• 提问者 诺森德的凛冽寒风 #2

  不要答非所问啊老师  仔细看问题描述好吗

• Sam 回复 提问者 诺森德的凛冽寒风 #3

  你好，你没有理解我的意思哦，我重新解释一下，见上面新的回复