Question

我们正在将保险报价表（即服务报价）作为iFrame嵌入到我们的网页中。它确实不适用于我们的设计，因此我们尝试使用jQuery更新CSS。

<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

在我们实际的Wordpress网站中使用相同的jQuery代码，我们会收到此其他错误Uncaught DOMException: Blocked a frame with origin。

因此，寻求有关如何在iFrame中更新CSS的建议。

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的内容。

使用jQuery将样式添加到iFrame

1 个答案: