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?

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
    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
    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
    Jul 7, 2023 at 15:12

1 Answer 1

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

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.