Hiding a div
inside an iframe
using CSS from the parent document can be a bit tricky due to the same-origin policy. The same-origin policy restricts web pages from making requests to a different domain than the one that served the web page.
However, if the iframe
content is from the same domain (or you have control over the content of the iframe
), you can use the following methods:
Directly in the iframe content:
If you have control over the content inside the iframe
, the simplest way is to add the necessary CSS directly to the content's stylesheet.
.hide-div {
display: none;
}
Using JavaScript:
If the iframe
is on the same domain, you can use JavaScript in the parent document to manipulate the content inside the iframe
.
var iframeContent = document.querySelector('iframe').contentDocument;
var divToHide = iframeContent.querySelector('.hide-div');
divToHide.style.display = 'none';
CSS Approach (limited):
If you want to hide the entire iframe
based on its content, you can use CSS in the parent document. However, this doesn't selectively hide elements inside the iframe
; it hides the entire iframe
.
iframe[src="path-to-iframe-content.html"] {
display: none;
}
If the iframe
content is from a different domain and you don't have control over its content, you won't be able to directly manipulate or style its internal content due to security restrictions. In such cases, you'd need cooperation from the domain serving the iframe
content, or you'd need to look into server-side solutions to modify the content before it's served.