How to change the style of an element in an iframe from the parent page?

Asked

Viewed 695 times

1

I use a component that generates a iframe accessing a remote page.

Example: assuming that no iframe there is a table with some TDs with class destaque, want to put a red border on these "highlights".

I tried the following code, but it doesn’t work:

$('iframe tr td.destaque').css('border-color', 'red');

How to change the style of an element in a iframe from the mother page?

UPDATE: Trying to use the contents, as a response from @Rafalages, it shows the following error:

jquery-3.1.0.min. js:2 Uncaught Securityerror: Failed to read the 'contentDocument' Property from 'Htmliframeelement': Blocked a frame with origin "https://192.168. 1.15" from accessing a frame with origin "https://www.google.com". Protocols, Omains, and ports must match.

1 answer

1

  • Now you have the error: jquery-3.1.0.min. js:2 Uncaught Securityerror: Failed to read the 'contentDocument' Property from 'Htmliframeelement': Blocked a frame with origin "https://192.168. 1.15" from accessing a frame with origin "https://www.google.com". Protocols, Domains, and ports must match.

  • 1

    Dude, the page has to be on the same domain as yours or else be with active CORS.

  • If you are on another domain and you do not have CORS active?

Browser other questions tagged

You are not signed in. Login or sign up in order to post.