iframe在dark模式下無(wú)法透明
先說(shuō)說(shuō)起因：
在做項(xiàng)目的時(shí)候需要通過(guò)iframe鏈接別的網(wǎng)頁(yè)床蜘，又需要使用自己的框架背景忌怎，就像這樣：
中間這塊紅色區(qū)域就是需要嵌入別人的網(wǎng)頁(yè)的炭晒。所以首先就想到iframe了伙菜。想到就開(kāi)干衍慎，一頓操作下來(lái)转唉，發(fā)現(xiàn)這塊地方始終是白色。
allowTransparency也設(shè)置成true了稳捆，背景也設(shè)置成透明了赠法。但還是不行。通過(guò)各種測(cè)試乔夯，發(fā)現(xiàn)瀏覽器是可以的砖织，支持透明。那是怎么回事呢末荐？又是對(duì)iframe有關(guān)的css屬性一頓查找侧纯，都沒(méi)能找到原因，難倒跟vue有關(guān)甲脏？不可能翱舭尽？
又開(kāi)始測(cè)試vue块请，把iframe寫到app根節(jié)點(diǎn)上娜氏，不加入任何其他代碼，測(cè)試完了過(guò)后墩新，發(fā)現(xiàn)vue中是可以的贸弥，那就奇了怪了，根節(jié)點(diǎn)可以的話抖棘，那下面就是就是vue-router了茂腥，再里面就是layout了狸涌，在界面布局layout里面就不行了，難倒跟vue-router有關(guān)系最岗？
又開(kāi)始測(cè)試vue-router和layout帕胆，測(cè)試完過(guò)后，還是沒(méi)發(fā)現(xiàn)問(wèn)題所在般渡。然后又想到可能是哪個(gè)css文件影響了懒豹。又去瀏覽器控制臺(tái)一個(gè)個(gè)找。找了半天下來(lái)驯用，還是沒(méi)發(fā)現(xiàn)脸秽。但某次切換light/dark模式的時(shí)候，驚奇的發(fā)現(xiàn)了light模式下蝴乔，iframe透明了记餐。
然后又是一頓找dark模式和light模式之間的差別，并且會(huì)影響到iframe透明的元素薇正。通過(guò)一個(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í)候雕沿，最終定位到
這句代碼上。
通過(guò)試驗(yàn)發(fā)現(xiàn)iframe在color-scheme: dark模式下無(wú)法透明猴仑。那么知道原因审轮，修改起來(lái)就簡(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模式下無(wú)法透明
}
</style>
