jquery - Injecting CSS into Iframe

admin管理员组

文章数量:1122832

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?

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?

• css
• jquery
• iframe

Share Improve this question edited Jul 7, 2023 at 13:23 PaulMcF87 asked Jul 7, 2023 at 12:57 PaulMcF87PaulMcF87 13166 bronze badges 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

Add a comment  | 

1 Answer 1

Sorted by: 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

本文标签： jqueryInjecting CSS into Iframe