0

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?

Improve this question
3
  • 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 ♦
    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
    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 ♦
    Commented Jul 7, 2023 at 15:12

1 Answer 1

Reset to default
0

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.