如何用JavaScript加载嵌入CSS文件并隐藏Shoppy弹窗的.embed--powered--logo元素？

云上老周

2026-7-9

解决Shoppy弹窗"Powered by Shoppy"隐藏问题

你可以通过JavaScript动态注入CSS样式来隐藏目标元素，比加载外部CSS再修改更直接高效。之前的CSS没生效，大概率是选择器优先级不够，或者弹窗是嵌入的iframe导致样式无法穿透。

方案一：高优先级CSS直接覆盖

如果弹窗不在iframe里，直接用更强优先级的样式：

<style type='text/css'>
.embed--powered--logo {
    display: none !important;
    visibility: hidden !important;
}
</style>

display:none比clip-path更彻底，能直接移除元素的占位空间，避免残留空白。

方案二：针对iframe的JS注入方案

Shoppy的弹窗通常是动态创建的iframe，普通样式无法穿透，这时候用JS监听iframe加载并注入样式：

<script>
// 定时检查弹窗iframe，间隔可根据实际调整
const checkIframe = setInterval(() => {
    const shoppyIframe = document.querySelector('iframe[src*="shoppy.gg"]');
    if (shoppyIframe && shoppyIframe.contentDocument) {
        // 创建样式元素并注入到iframe的文档中
        const styleEl = shoppyIframe.contentDocument.createElement('style');
        styleEl.textContent = '.embed--powered--logo { display: none !important; }';
        shoppyIframe.contentDocument.head.appendChild(styleEl);
        // 找到iframe后停止检查
        clearInterval(checkIframe);
    }
}, 300);
</script>

把这段JS放在你的页面脚本里，确保在Shoppy的embed.js之后加载。