Override body style for content in an iframe

by

The below only works if the iframe content is from the same parent domain.

The following jquery script works for me. Tested on Chrome and IE8. The inner iframe references a page that is on the same domain as the parent page.

In this particular case, I am hiding an element with a specific class in the inner iframe.

Basically, you just append a style element to the head section of the document loaded in a frame:

frame.addEventListener("load", ev => {
    const new_style_element = document.createElement("style");
    new_style_element.textContent = ".my-class { display: none; }"
    ev.target.contentDocument.head.appendChild(new_style_element);
});

You can also instead of style use a link element, for referencing a stylesheet resource.

More Related Contents:

  1. How do I override default PrimeFaces CSS with custom styles?
  2. Using CSS to affect div style inside iframe
  3. Making an iframe responsive
  4. In which order do CSS stylesheets override?
  5. How to style icon color, size, and shadow of Font Awesome Icons
  6. how to properly display an iFrame in mobile safari
  7. YouTube Video Embedded via iframe Ignoring z-index?
  8. z-index does not work in Internet Explorer with pdf in iframe
  9. How to override the properties of a CSS class using another CSS class
  10. CSS Parent/Ancestor Selector [duplicate]
  11. How to apply css to iframe content? [closed]
  12. Angular dynamic background images
  13. Safari/Chrome (Webkit) – Cannot hide iframe vertical scrollbar
  14. Switching CSS classes based on screen size
  15. How to override the properties of a CSS class to avoid copying and renaming styles
  16. Adding a styled CSS button
  17. How can I make Bootstrap columns all the same height?
  18. How to style child components from parent component’s CSS file?
  19. How to get a parent element to appear above child [duplicate]
  20. Match all elements having class name starting with a specific string [duplicate]
  21. Changing three.js background to transparent or other color
  22. SVG gradient using CSS
  23. What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)
  24. How to position a div in the middle of the screen when the page is bigger than the screen
  25. Zoom control and streetview not showing on my Google map?
  26. How do I remove blue “selected” outline on buttons?
  27. “text-decoration” and the “:after” pseudo-element, revisited
  28. How do I change md-input-container placeholder color using css in angular material?
  29. internet explorer font face ssl
  30. Styling the arrow on bootstrap tooltips [duplicate]

Leave a Comment