更改通过谷歌标签管理器添加并在 iframe 中异步加载的小部件的 css 属性

西里尔·杜尚-多丽丝

我在我的网站上添加了一个显示在屏幕右下角的小部件，但我更希望它出现在左下角。谷歌标签是这样的脚本

<script src="https://leadbooster-chat.pipedrive.com/assets/loader.js" async></script>

并在加载脚本后生成具有适当 css 定位的 iframe

HTML

<iframe role="complementary" scrolling="no" id="LeadboosterContainer" class="proactiveChat" style="height:100px !important"></iframe>

CSS

@media (min-width: 576px)
<style>
html body #LeadboosterContainer {
    bottom: 28px !important;
    right: 28px !important;
}

事实证明，该小部件无法通过其界面进行配置以显示在左侧屏幕上（我会向他们发送建议），但我发现只需将right: 28px !important;a更改为 aleft就足以产生相当可接受的行为。

我知道开发人员将来可能会更改此属性，并且我正在考虑的解决方案有点脏，但是是否可以准确定位在通过脚本加载小部件后生成的 CSS，以及将更改right为left? 如您所见，这里的挑战

该脚本正在异步加载 HTML
有一个媒体查询（实际上有几个规则需要更改）
有一个 !important 标志，它使得在全新的样式表中更难覆盖此 CSS 规则
这是另一个网站上的 iframe ......所以我们不能做任何我们想做的事情，因为安全策略适用于 iframe 内部，我们只能控制 iframe 元素本身进行定位

我怎样才能做到这一点？我需要在异步脚本启动后触发一个事件，然后找到一种方法来定位媒体查询。

我想添加到我的谷歌标签的一个例子

// TODO : find a way to fire this code after the script has loaded / implement runAfterChatBotHasLoaded
runAfterChatBotHasLoaded( function() {
  var pipedriveBot = document.getElementById("LeadboosterContainer");
  // TODO : find a way to target each media query
  position = pipedriveBot.getAttribute('right');
  pipedriveBot.setAttribute('left', position)
  pipedriveBot.removeProperty('right'));
});

我也试过

通过https://davidwalsh.name/add-rules-stylesheets添加规则（我遇到了Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': The index provided (1) is larger than the maximum index (0).
查找所有适用于元素的 CSS 规则的各种想法

ASomN

如果小部件在 iframe 中，那么您需要：

iframe 中的 GTM，而不仅仅是父窗口
用于在 iframe 和父窗口之间安全调用函数的 post 消息 api（父窗口是 GTM 正在加载的位置）

如果您定位的 css 在 iframe 中，那么您需要将其视为没有加载 GTM 容器的不同网站。

如果您试图将 iframe 移动到左下角，那么这在jsfiddle 中对我有用：

var pipedriveBot = document.getElementById("LeadboosterContainer");

// remove the styling
pipedriveBot.style.setProperty('bottom', '0', 'important');

// Add your own
pipedriveBot.style.position = "fixed";
pipedriveBot.style.left = "0px";

另请参阅有关删除使用 !important 设置的 css 属性的文章：如何删除重要的 CSS 属性？

让我知道我是否理解正确。如果您需要等到 DOM 包含 LeadboosterContainer，那么您可以设置一个函数来定期检查 DOM，然后触发一个函数。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。