Добавьте стиль в iFrame с помощью jQuery

Question

Мы встраиваем в наши веб-страницы бланк цитирования страховой компании (Quoting-As-A-Service) в качестве iFrame.Это действительно не работает с нашим дизайном, поэтому мы пытаемся обновить CSS с помощью jQuery.

<iframe src="https://www.agentinsure.com/compare/auto-insurance-home-insurance/insura/quote.aspx" width="100%" height="2000" frameborder="0"></iframe>

jQuery(document).ready(function($) {
  $('iframe').on('load', function() {
    let el = $(this).contents().find('body');
    el.css('background', 'red');
    el.html('<p>jquery added this content</p>');
  });
});

Вот ссылка на кодовую ручку с тем же кодом.https://codepen.io/ben_jammin/pen/KbPRxW

С тем же кодом jQuery на нашем реальном веб-сайте Wordpress мы получаем эту другую ошибку Uncaught DOMException: Blocked a frame with origin.

Итак, ищем совет, как обновить CSS в iFrame, если онвозможно.

https://insura4you.kavoddigital.com/test-2

jquery.js?ver=1.12.4:2 Uncaught DOMException: Blocked a frame with origin "https://insura4you.kavoddigital.com" from accessing a cross-origin frame.
    at contents (https://insura4you.kavoddigital.com/wp-includes/js/jquery/jquery.js?ver=1.12.4:2:26921)
    at Function.map (https://insura4you.kavoddigital.com/wp-includes/js/jquery/jquery.js?ver=1.12.4:2:3613)
    at a.fn.init.n.fn.(anonymous function) [as contents] (https://insura4you.kavoddigital.com/wp-includes/js/jquery/jquery.js?ver=1.12.4:2:27001)
    at HTMLIFrameElement.<anonymous> (https://insura4you.kavoddigital.com/wp-content/themes/insurel/js/theme.init.js:221:13)
    at HTMLIFrameElement.dispatch (https://insura4you.kavoddigital.com/wp-includes/js/jquery/jquery.js?ver=1.12.4:3:12444)
    at HTMLIFrameElement.r.handle (https://insura4you.kavoddigital.com/wp-includes/js/jquery/jquery.js?ver=1.12.4:3:9173)
contents @ jquery.js?ver=1.12.4:2
map @ jquery.js?ver=1.12.4:2
n.fn.(anonymous function) @ jquery.js?ver=1.12.4:2
(anonymous) @ theme.init.js:221
dispatch @ jquery.js?ver=1.12.4:3
r.handle @ jquery.js?ver=1.12.4:3
load (async)
add @ jquery.js?ver=1.12.4:3
a.event.add @ jquery-migrate.min.js?ver=1.4.1:2
(anonymous) @ jquery.js?ver=1.12.4:3
each @ jquery.js?ver=1.12.4:2
each @ jquery.js?ver=1.12.4:2
sa @ jquery.js?ver=1.12.4:3
on @ jquery.js?ver=1.12.4:3
(anonymous) @ theme.init.js:220
i @ jquery.js?ver=1.12.4:2
fireWith @ jquery.js?ver=1.12.4:2
ready @ jquery.js?ver=1.12.4:2
K @ jquery.js?ver=1.12.4:2

Answer 1

Это означает, что встроенный веб-сайт запрещает вам доступ / изменение его содержимого.Ни один крупный браузер не позволит вам сломать этот параметр.Нет способа манипулировать таким содержимым iframe.