After searching Google and Stack Overflow I decided to ask if this is even possible.

Currently I am loading an iFrame on my site. I wish to hide a certain element loaded in the iFrame.

<span id="blahblah">


function collapseAll(){

var body = document.getElementById('body');
var spans = body.getElementsByTagName("span");
var span;
for (i = 0; i < spans.length; i++){
  span = spans[i];
  if(span.class=='blahblah'){
  span.style.visibility = "hidden";
  }
 }
}

However this did not work. Question number one is can this be done? If yes could you explain how?

Thank you kindly.

After searching Google and Stack Overflow I decided to ask if this is even possible.

Currently I am loading an iFrame on my site. I wish to hide a certain element loaded in the iFrame.

<span id="blahblah">


function collapseAll(){

var body = document.getElementById('body');
var spans = body.getElementsByTagName("span");
var span;
for (i = 0; i < spans.length; i++){
  span = spans[i];
  if(span.class=='blahblah'){
  span.style.visibility = "hidden";
  }
 }
}

However this did not work. Question number one is can this be done? If yes could you explain how?

Thank you kindly.

• javascript
• iframe
• hide
• html

• This is done most easily using query strings in the iframe src attribute but can be acplished cross-domain using JavaScript despite answers suggesting otherwise. – vhs Commented Aug 30, 2018 at 12:27
• Duplicates stackoverflow./questions/3564466/… – vhs Commented Aug 30, 2018 at 12:30

4 Answers 4

You'll have to put that script inside the contents of the iframe. You can't access the DOM of another frame, especially if it's from another domain.

Sorry, but you cannot access elements within an iframe from the outer window, due to security controls.

You would have to try this, but you might be able to create a function on the window object of the iframe and the call it from the outer window.

In the iframe:

<script type="text/javascript">
    window.collapseAll = function() {
        .....
    }
</script>

In the outer window:

<script type="text/javascript">
    function doCollapse() {
        document.getElementById('my_iframe").window.collapseAll();
    }
</script>

Again, that's untested but I'm pretty sure Facebook does something similar to that.

if the iframe is from the same domain as your javascript is from then this is doable.

using plain javascript you would write the following

`

function collapseAll(){

var body = document.getElementById('body');
var spans = body.getElementsByTagName("span");
var span;
for (i = 0; i < spans.length; i++){
  span = spans[i];
  if(span.class=='blahblah'){
  **span.style.display = "none";**
  }
 }
}

this fixes the issue.

if the iframe is from a different site (domain) then things would get really difficult.. there are solutions like greasemonkey which can operate on pages from different domains.

you can try

document.frame.document.getElementsByTagName('span')

<script type="text/javascript">

function remove_elemment() {
    var body = document.getElementById('body');
	var divs = body.getElementsByTagName("div");
	var div;
	for (i = 0; i < divs.length; i++){
	  div = divs[i];
	  if(div.class=='buybox'){
	  	**div.style.display = "none";**
	  }
	}
};

function doRemove() {
    document.frame.document.getElementById('my_iframe').remove_elemment();
}();

</script>

<div class="floating-widget">
	<iframe id="my_iframe" src="http://www.nodebeginner/index-vi.html" frameborder="0" width="100%" height="500">				
	</iframe>

</div>