iframe在dark模式下無法透明

先說說起因：

在做項(xiàng)目的時(shí)候需要通過iframe鏈接別的網(wǎng)頁，又需要使用自己的框架背景，就像這樣：

image.png

中間這塊紅色區(qū)域就是需要嵌入別人的網(wǎng)頁的。所以首先就想到iframe了。想到就開干，一頓操作下來，發(fā)現(xiàn)這塊地方始終是白色。

allowTransparency也設(shè)置成true了，背景也設(shè)置成透明了。但還是不行。通過各種測(cè)試，發(fā)現(xiàn)瀏覽器是可以的，支持透明。那是怎么回事呢？又是對(duì)iframe有關(guān)的css屬性一頓查找，都沒能找到原因，難倒跟vue有關(guān)？不可能?。?/p>

又開始測(cè)試vue，把iframe寫到app根節(jié)點(diǎn)上，不加入任何其他代碼，測(cè)試完了過后，發(fā)現(xiàn)vue中是可以的，那就奇了怪了，根節(jié)點(diǎn)可以的話，那下面就是就是vue-router了，再里面就是layout了，在界面布局layout里面就不行了，難倒跟vue-router有關(guān)系？

又開始測(cè)試vue-router和layout，測(cè)試完過后，還是沒發(fā)現(xiàn)問題所在。然后又想到可能是哪個(gè)css文件影響了。又去瀏覽器控制臺(tái)一個(gè)個(gè)找。找了半天下來，還是沒發(fā)現(xiàn)。但某次切換light/dark模式的時(shí)候，驚奇的發(fā)現(xiàn)了light模式下，iframe透明了。

然后又是一頓找dark模式和light模式之間的差別，并且會(huì)影響到iframe透明的元素。通過一個(gè)個(gè)css文件刪除中，最后發(fā)現(xiàn)是element-plus的dark/css-vars.scss文件產(chǎn)生的影響。

然后又對(duì)dark/css-vars.scss文件中的內(nèi)容一項(xiàng)項(xiàng)的排除，都快郁悶的時(shí)候，最終定位到

image.png

這句代碼上。

通過試驗(yàn)發(fā)現(xiàn)iframe在color-scheme: dark模式下無法透明。那么知道原因，修改起來就簡(jiǎn)單了，對(duì)iframe進(jìn)行單獨(dú)的color-scheme設(shè)置就好了。

<template>
    <iframe :src="src" border="0" frameborder="0" scrolling="no" width="100%" height="100%" allowtransparency="true"/>
</template>
<script lang="ts" setup>
const props = defineProps({
    src: {
        type: String,
        default: ""
    }
})
</script>

<style lang="scss">
iframe {
  background-color: transparent !important;
  color-scheme: light;//dark模式下無法透明
}
</style>