Remove ELEMENT behind Iframe

Question

Remove ELEMENT behind Iframe

Asked 8 years ago

Viewed 393 times

-1

I use a microsoft BI tool and this tool creates dynamic graphics. One of the ways to share these graphics is through the use of a Iframe through a portal. When I receive the frame with data from the developed chart has a sharing icon of the created chart and I would like to remove this element.

I tried to create a script like this:

function setDisabled() {
  document.getElementById("glyphicon glyphicon-share-twitter glyph-small icon").disabled = true;
}

glyphicon glyphicon-share-twitter glyph-small icon = Icon I want to remove.

Can someone help me?

1 answer

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.

by Guilherme Nascimento • **98,651** points · Answer 1 · 2016-09-27T17:45:59+00:00

The getElementById is used to pick up elements by Ids and not by classes.

For example:

setTimeout(function() {
    document.getElementById("test").disabled = true;
}, 1000);

<input id="test">

There is the getElementsByClassName which takes elements by the set of classes, needs to have at least one, each item of the class is divided by a space, for example:

 console.log(document.getElementsByClassName("foo").length);
 console.log(document.getElementsByClassName("baz").length);
 console.log(document.getElementsByClassName("bar").length);

<input class="foo baz bar">

See that all return 1 in . length, even foo being at the beginning, baz being in the middle and bar being at the end, because the getElementsByClassName works by the item separated by spaces.

It is not always possible to manipulate the contents of an iframe, it affects security policies, however if iframe is of the same domain as yours then you can try to use it like this:

Suppose HTML is something like:

<iframe id="ID_DO_IFRAME"></iframe>

In javascript you can use the contentWindow, should look something like (this way it will remove all items that have this class):

function setDisabled() {
  var iframe = document.getElementById("ID_DO_IFRAME").contentWindow;

  var shareBtns = iframe.document.getElementsByClassName("glyphicon-share-twitter");
  for (var i = shareBtns.length - 1; i >= 0; i--) {
    shareBtns[i].disabled = true;
  }
}

or with querySelector if it is only an item, so remove only the first found:

function setDisabled() {
  var iframe = document.getElementById("ID_DO_IFRAME").contentWindow;

  iframe.document.querySelector("glyphicon-share-twitter").disabled = true;
  }
}

If the element is not within IFRAME, then simply do this:

function setDisabled() {
  var shareBtns = document.getElementsByClassName("glyphicon-share-twitter");
  for (var i = shareBtns.length - 1; i >= 0; i--) {
    shareBtns[i].disabled = true;
  }
}

Completion

Don’t go out using the functions randomly, learn first what they actually do, ie, Always read the documentation, this for any language, here are some links about DOM, learn how each function works before using them: