Estoy usando el widget Clutch en la página de mi sitio web https://staging-outpaceseo.kinsta.cloud/services/law-firm-seo/ para cierta credibilidad. Y el iframe tiene su CSS predefinido que necesito anular. Intenté agregar la etiqueta de estilo dentro del iframe usando jQuery, pero no funciona.

Página web: https://staging-outpaceseo.kinsta.cloud/services/law-firm-seo/ Guión:

 <script> $(document).ready(function() { const id = $('.clutch-widget iframe').attr('id'); var iframe = document.getElementById(id); var style = document.createElement('style'); style.textContent = '.carousel_widget__wrapper, .carousel_widget {' + ' background: #ffffff;' + '}' ; console.log(id, 'id') console.log(iframe, 'iframe') console.log(style, 'style') console.log(iframe.contentDocument, 'iframe.contentDocument') // let head = iframe.contents().find('head'); // head.append(style); iframe.contentDocument.head.appendChild(style) }); </script>

Puede consultar la consola de la página para verificar la salida de los registros de la consola anteriores. En lugar de agregar la etiqueta de estilo al iframe de embrague, creo que se está creando un nuevo iframe y la etiqueta de estilo se agrega allí.