I want to remove specific html if my page is shown in an iframe. What I want to do in my (html) code:
<body>
<!--Some random html here-->
<script>
if(self==top) { /* <- This detects that the page is not displayed in an iframe*/
/*-----The html that I put here should only show if not in an iframe!-----*/
}
</script>
<!--Some random html here-->
</body>
The best way to do this would be to put the html that might be hidden inside an element, and then show/hide that element based on whether you're in an iframe or not.
<head>
<script>
if(self===top) { /* <- This detects that the page is not displayed in an iframe*/
document.getElementById('HideIfIframe').style.display = 'block';
}
</script>
</head>
<body>
This will always show.
<div id="HideIfIframe" style="display: none;">This will only show when not in an iFrame</div>
<!--Some random html here-->
</body>
You'll probably need to put the JS code in a function and execute it on page load, to make sure that the div is available, but that's the basic idea.
Using the if (self==top) method, or, better if (self==parent), you can check if your page is in an <iframe> and remove the desired element afterwards.
To implement this behavior you'll need some distinguishable id or class to find the elements to remove, and also load the script after them, so maybe at the end of your body.
In your HTML page you'll add some class to the elements you don't want to be shown in a frame, like this:
<body>
<div class="noframe"></div>
<!-- I don't want this to be shown in a frame! -->
<script src="script.js"></script>
</body>
In your script.js file you'll simply remove the elements:
if (self != parent) {
var toRemove = document.querySelectorAll('.noframe');
// Remove the elements you don't want in the iframe
for (var i=0; i < toRemove.length; i++) {
toRemove[i].parentElement.removeChild(toRemove[i]);
}
}
