Javascript to Remove Elements loaded in iFrame

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. Q开发者_高级运维uestion number one is can this be done? If yes could you explain how?

Thank you kindly.

---

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.org/index-vi.html" frameborder="0" width="100%" height="500">				
	</iframe>

</div>