第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

iframe 內(nèi)的 Vue 3 實(shí)例中事件監(jiān)聽(tīng)器的延遲注冊(cè)

iframe 內(nèi)的 Vue 3 實(shí)例中事件監(jiān)聽(tīng)器的延遲注冊(cè)

桃花長(zhǎng)相依 2023-08-10 14:36:28
當(dāng)將新元素添加到 中時(shí)iframe,用戶(hù)事件(即單擊)需要相當(dāng)長(zhǎng)的時(shí)間才能開(kāi)始被識(shí)別。(在我的場(chǎng)景中更加明顯,以至于完全無(wú)法使用)精通 Vue 的人是否至少了解為什么會(huì)發(fā)生這種情況以及是否有辦法防止它發(fā)生?任何見(jiàn)解將不勝感激。謝謝。*原因是我正在構(gòu)建一個(gè)瀏覽器擴(kuò)展,將側(cè)邊欄注入到頁(yè)面中,并且我需要隔離CSS,因?yàn)樵摂U(kuò)展要在各個(gè)頁(yè)面上使用,所以幾乎不可能防止所有樣式泄漏到頁(yè)面中注入側(cè)邊欄。是的,避免iframe使用 and using#myDiv{ all: unset }在某種程度上是有效的,但對(duì)于頁(yè)面 CSS 中定義的一些非常具體的選擇器來(lái)說(shuō)會(huì)失?。ú⑶彝耆贿m用于input元素)。在我想要支持的所有頁(yè)面上尋找它們很快就會(huì)變成一場(chǎng)噩夢(mèng)。
查看完整描述

1 回答

?
HUX布斯

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超6個(gè)贊

回答我自己的問(wèn)題,因?yàn)闆](méi)有人對(duì)此有任何解釋。然而,這并沒(méi)有回答最初的問(wèn)題,但我認(rèn)為如果有人偶然發(fā)現(xiàn)這個(gè)問(wèn)題,他們應(yīng)該知道我是如何解決它的。

最后,我放棄了 iFrame 的想法,并使用Shadow DOM的概念來(lái)將頁(yè)面的 CSS 和注入的擴(kuò)展的 CSS 彼此隔離。

盡管這種方法有其自身的注意事項(xiàng)*,但恕我直言,它優(yōu)于使用 iframe。

*就像需要手動(dòng)將自定義樣式注入到影子根中一樣。并且還需要將影子根元素存儲(chǔ)在應(yīng)用程序所有部分都可以訪(fǎng)問(wèn)的地方(不是 Vuex,元素本身不能存儲(chǔ)在那里),以便使諸如此類(lèi)的事情正常工作。

這是我用來(lái)將側(cè)邊欄注入頁(yè)面的代碼片段:

// append a new node to the document body

let shadowHost = document.createElement("div");

document.body.appendChild(shadowHost);

? ??

// make it the root of our shadow DOM

let shadow = shadowHost.attachShadow({ mode: 'open'})


// create a new node for the sidebar

let sidebar = document.createElement("div");

sidebar.id = "my-sidebar";


// and also a style node into which we put all our custom css

const style = document.createElement('style');

// getPackedCss is my function that returns all the custom css as a string

style.textContent = getPackedCss();


// and append those to the shadow DOM

shadow.appendChild(style);

shadow.appendChild(sidebar);

? ??

// store the shadow root somewhere that we can access

// globally in order to select elements from it

staticStore.shadowRoot = shadow;


// create our vue app and mount it to the shadow DOM

const app = createApp(MyApp);

app.mount(sidebar);

如果您確實(shí)需要 Vue 3 和 iframe 來(lái)互相點(diǎn)贊,我想您只能靠自己了。


查看完整回答
反對(duì) 回復(fù) 2023-08-10
  • 1 回答
  • 0 關(guān)注
  • 200 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)