Personalização externa embed widget

Question 1

Estou tentando personalizar uma incorporado widget do Zendesk no meu site. Uma vez que eles não dão nenhuma opção para personalizar a aparência da sua forma, eu gostaria de impor o meu regras css.

Eu adicionei este pedaço de código a partir de Zendesk para ter a sua forma em minha página.

<script type="text/javascript" src="https://leads-capturer.futuresimple.com/embed.js?token=ca98908sdgfgds9834234jlkjsdb">

Este script coloca um formulário dentro de um <iframe> e todos nós dentro deste <iframe> não pode ser personalizado/alterado.

Eu tentei JS para definir um estilo inline para elementos de formulário dentro do <iframe>. Tentei criar uma nova folha de estilos para substituir original de folha de estilos, mas nada parece funcionar.

Mesmo algo tão simples como este código abaixo, falha (#iframe-main-container é uma criança <iframe>):

<script>
    let p = document.querySelector('#iframe-main-container');
    p.style.background = 'red';
</script>

Se eu alterar o código acima e destino <iframe>, ele funciona.

A minha primeira pergunta seria, é possível substituir uma já existente regra CSS a partir de uma incorporado widget?

Se isso é possível, estou fazendo algo de errado para alterar a sua aparência?

Question 2

Tentar dar um presente.

  <script>
    let iframe = document.getElementsByTagName("iframe");
    let p = iframe[0].contentWindow.document.getElementById('#iframe-main-container');
    p.style.background = 'red';
  </script>

Rob Moll · Answer 1 · 2021-11-18T16:53:30

0

Tentar dar um presente.

  <script>
    let iframe = document.getElementsByTagName("iframe");
    let p = iframe[0].contentWindow.document.getElementById('#iframe-main-container');
    p.style.background = 'red';
  </script>

Rob Moll

2021-11-18 16:53:30

Obrigado por sua ajuda @Rob Moll Sua sugestão de código está retornando 'não' para que seletor. Eu acredito que este script está sendo executado antes de DOM estiver pronto. Eu tentei um par de truques aqui, tais como: '$(document).pronto(function() { console.log($('#iframe-main-container').css('padding-bottom')); });' outra tentativa foi a execução de uma função setTimeout após 5 segundos para ler um valor css do #iframe-main-container, mas eu estou sempre recebendo o 'não' como o seu valor. Quaisquer pensamentos?

Maluco

Personalização externa embed widget

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria