Injecting CSS into Iframe

Question

I have added an iframe to my website. Within the I-Frame is an area which is not required and I would like to hide.

I have tried to inject CSS into the i-frame using

Functions.php

add_action( 'wp_enqueue_scripts', 'Eazy_scripts' );
function Eazy_scripts() {
    wp_register_script('js-iframe', get_stylesheet_directory_uri() . '/js/iframe.js', array('jquery'),'1.1', true);
    wp_enqueue_script('js-iframe');
}

The script iframe.js

jQuery(document).ready(function(){
  jQuery("#EazyOpsFrame").on("load", function() {
      let head = $("#EazyOpsFrame").contents().find("head");
      let css = '<style>div.fixed.area{display:none !important}</style>';
  jQuery(head).append(css);
  });
});

This doesnt seem to work, are there any recommendations?

The CSS is probably already loaded at that point. Might be better off just finding the specific element in the contents and using JS to hide it: $("#EazyOpsFrame").contents().find( 'div.fixed.area' ).hide(); — Howdy_McGee
– Howdy_McGee ♦, Commented Jul 7, 2023 at 14:20
@Howdy_McGee If i Done that... Would <style>div.fixed.area{display:none !important}</style> change to <style>display:none !important</style> — PaulMcF87
– PaulMcF87, Commented Jul 7, 2023 at 14:42
You wouldn't need the CSS line at all. JS will add an inline style to the element hiding it. — Howdy_McGee
– Howdy_McGee ♦, Commented Jul 7, 2023 at 15:12

Caleb · Accepted Answer · 2023-07-07 14:51:48Z

1

If the source of the iframe is not on the same domain as the page that the iframe is embedded on, you cannot change contents inside the iframe.

If the iframe's source is on the same domain, add the CSS directly to the source page.

More: https://stackoverflow.com/a/36513940

answered Jul 7, 2023 at 14:51

Caleb

2,5291 gold badge15 silver badges15 bronze badges

Add a comment |

Stack Exchange Network

Injecting CSS into Iframe

1 Answer 1

Your Answer

Hot Network Questions

Injecting CSS into Iframe

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions