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

Question

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

<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; 更改为 left 足以产生完全可以接受的行为。

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

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

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

我想添加到我的 google 标签的示例

// 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).
来自Find all CSS rules that apply to an element

Answer 1

如果小部件位于 iframe 中，则您需要：

iframe 中的 GTM，而不仅仅是父级 window
post 消息 api 安全地调用 iframe 和父 window 之间的函数（父 window 是 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 属性的文章：How can you remove an important CSS property?

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

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

Change css property of a widget added via the google tag manager and loaded aynchronously in an iframe

html

javascript

css

media-queries

google-tag-manager

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

Change css property of a widget added via the google tag manager and loaded aynchronously in an iframe

html

javascript

css

media-queries

google-tag-manager

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