Изменить css свойство виджета, добавленного через менеджер тегов Google и загруженного асинхронно в iframe

Question

Я добавил виджет на свой веб-сайт, который отображается в правом нижнем углу экрана, но я бы предпочел, чтобы он появился в левом нижнем углу. Google-тег представляет собой скрипт, подобный этому

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

И после загрузки скрипт генерирует iframe с соответствующим css позиционированием

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 асинхронно
• Существует медиа-запрос (и на самом деле есть несколько правил, которые необходимо изменить)
• есть флаг! Важный, который затрудняет переопределение этого правила CSS в новой таблице стилей
• это iframe на другом сайте ... поэтому мы не можем ничего делать хочу, так как политики безопасности применяются внутри iframe, и у нас есть контроль только над самим элементом iframe для позиционирования

Как я могу это сделать? Мне нужно вызвать событие после запуска сценария asyn c, а затем найти способ нацеливания на медиазапросы.

Пример того, что я думаю добавить в мой тег 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).
• Различные идеи от Найти все CSS правила, которые применяются к элементу

Answer 1

Если виджет находится в iframe, вам необходимо:

• GTM в iframe, а не только в родительском окне
• API сообщения post для безопасного вызова функций между iframe и родительское окно (родительское окно, в которое загружается GTM)

Если нацеливаемый вами css находится в iframe, то вам нужно рассматривать его как другой веб-сайт, который не имеет ваш контейнер GTM загружен на него.

Если вы пытаетесь переместить фрейм в нижний левый угол, это работает для меня в 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";

См. Также эту статью об удалении css свойств, которые установлены с помощью! Important: Как удалить важное свойство CSS?

Дайте мне знать, если я правильно понял. Если вам нужно подождать, пока DOM не содержит LeadboosterContainer, вы можете установить функцию для периодической проверки DOM, а затем для запуска функции.