首页 > 解决方案 > HTML 检查器中的 Twitter 小部件“事件”在样式被覆盖时消失

问题描述

我目前正在研究默认 Twitter 小部件的自定义样式(您可以嵌入到您的网站上的那个。我已经弄清楚样式的注入并且效果很好,但我最近意识到当我的样式被注入时你不能再点击推文在新页面中打开它。我正在注入这样的风格:

const iframeDocument = iframe.contentWindow.document;
const injectedStyle = `<style>${css}</style>`;
iframeDocument.body.innerHTML = iframeDocument.body.innerHTML + injectedStyle;

我必须这样做,因为传递<link>.css 文件在这里不起作用。执行上面的代码时,在 Firefox Inspector 中,我可以看到“事件”消失了——我想知道为什么会这样,以及是否可以注入我的风格并拥有可点击的推文。

当没有样式注入时

注入样式时

标签: javascripthtmlcssreactjstypescript

解决方案


我已经修好了。问题是我将自定义样式附加到身体,而不是头部。当我使用iframeDocument.head.innerHTML = iframeDocument.head.innerHTML + injectedStyle;它时,它开始工作得很好。


推荐阅读