如何设置 Shopify 2.0 inbox/chat 图标的样式（在 iframe 内）？

Question

问题

Shopify 的聊天图标妨碍了很多内容（他们论坛上的一个常见问题）但是旧的 CSS 解决方案不起作用，因为新的 inbox/chat 图标现在在里面一个 iframe - 我的 JS 很蹩脚。

已经尝试过

已阅读许多 Whosebug 答案和博客文章，但无法正常工作，抱歉。结合一些答案的年代，我不清楚我试过的答案是否是'correct'做事的方式。

尽管如此，这是我所处位置的简化版本...

<iframe id="dummy-chat-button-iframe" name="dummy-chat-button-iframe" src="about:blank"></iframe>

<script>
  var iframe = document.getElementById("dummy-chat-button-iframe");
  var element = iframe.contentWindow.document.getElementById("dummy-chat-button")[0];
  element.style.height = "40px";
  element.style.width = "40px";
</script>

上面是一个测试，看看我是否可以影响 iframe 中的元素，实际 selectors/styles 我需要定位的是...

button#dummy-chat-button.chat-toggle {
  margin-top: 3px;
  height: 40px;
  width: 40px;
  padding: 0;
}
button.chat-toggle svg {
  width: auto;
  height: 20px;
  margin: auto;
}

注意：我无法控制 iframe 的 HTML、样式或 iframe 调用本身，因此只能使用 iframe 外部的 CSS 和 JS。

问题

根据以上信息，谁能告诉我在 iframe 中设置元素样式所需的 JS？
考虑到我需要更改的样式数量，我是否应该在 iframe 的头部添加一个 <style> 元素，是否可以使用 JS？

抱歉，我的 JS 非常有限，任何帮助或正确方向的指示将不胜感激。

干杯，本

Answer 1

在 iframe 上使用转换一次缩放多个 CSS 属性，而不需要 JS...

/* Shopify inbox chat icon */
#dummy-chat-button-iframe {
  transform: scale(0.75);
  bottom: -5px !important;
  right: -5px !important;
}

在re-sizing之后，其他规则将图标移近bottom/right边缘。

一个问题：有人聊天后关闭聊天window，图标又变回原来的size/location。

我猜这是 JS 更好的地方？

如何设置 Shopify 2.0 inbox/chat 图标的样式（在 iframe 内）？

How to style Shopify 2.0 inbox/chat icon (inside an iframe)?

javascript

iframe

shopify

shopify-template

问题

已经尝试过

问题