Sharepoint Online Can't Hide iFrame ribbon

Question

I'm trying to hide an iframes 0365 ribbon in sharepint but it's just returning this...

TypeError: document.getElementById(...) is null

This is the code I'm testing with, I'll use display:none eventually...

document.getElementById('.content-frame').contentDocument.body.getElementById('#suiteBarDelta').style.visibility = 'hidden';

Is there a better way to do this?

Maybe ".content-frame" is not an id, rather it looks like a querySelector for a class. Also, you won't be able to access the DOM of your iframe unless your script is hosted on the same domain as sharepoint. — James, Jan 24 '18 at 18:29
@James ah, that was a stupid error. So I changed that, but now it's telling me that the contentDocument is undefined, this is the code... `document.getElementsByClassName('content-frame').contentDocument.body.getElementById('#suiteBarDelta').style.visibility = 'hidden';` and this is the error.... `TypeError: document.getElementsByClassName(...).contentDocument is undefined`, both pages are hosted on the same team site — joshmk, Jan 24 '18 at 18:36
getElementsByClassName returns a collection of elements so you would need to pick one before trying to access the contentDocument property, eg `document.getElementsByClassName("content-frame")[0].contentDocument...` — James, Jan 24 '18 at 19:13
@James I gave that a try, but now it's telling me it's not a function... `TypeError: document.getElementsByClassName(...)[0].contentDocument.body.getElementById is not a function`, this is the code `document.getElementsByClassName('content-frame')[0].contentDocument.body.getElementById('#suiteBarDelta').style.visibility = 'hidden';` — joshmk, Jan 24 '18 at 19:38
it's `...contentDocument.getElementById`, not `...contentDocument.body.getElementById` — James, Jan 24 '18 at 19:40
@James now it's saying it's null, should I use contentWindow instead? — joshmk, Jan 24 '18 at 19:44
[Here](https://jsfiddle.net/x6xh3x4v/1)'s a working example. — James, Jan 24 '18 at 19:52
@James Hmm, I wonder if it has something to do with sharepoint though. Or maybe the iframe contents haven't loaded yet? [find example here](https://stackoverflow.com/questions/12199797/why-is-iframe-contentwindow-null) — joshmk, Jan 24 '18 at 21:28
@James when I return just to the contentDocument, it returns `HTMLDocument about:blank` — joshmk, Jan 24 '18 at 21:40
Yep could be that the iframe isnt loaded when your script runs. You could try using the onload handler for the iframe, [related question](https://stackoverflow.com/questions/1463581/wait-for-iframe-to-load-in-javascript) — James, Jan 24 '18 at 21:51
@James I know this conversation is getting long, but could you possibly send me a link for that? I can't seem to find one that's working well. — joshmk, Jan 24 '18 at 22:32

score 0 · Accepted Answer · answered Jan 24 '18 at 23:11

Let's say you're adding this script directly to the html file that contains the "parent" window code (ie, it has the iframe). Make sure the iframe is defined when this code executes (so, put the script block after the iframe element, or use a window.onload or document.ready handler)

<iframe class='content-frame'></iframe>

...

<script>
document.getElementsByClassName("content-frame")[0].addEventListener("load", function () {
  // the document in the iframe has loaded.  let's hide that ribbon bar
  var ribbonBar = this.contentDocument.getElementById("suiteBarDelta");
  if (ribbonBar) {
    ribbonBar.style.visibility = 'hidden';
  } else {
    console.log("uh oh, ribbonBar still does not exist");
  }    
});
</script>

I really don't know if Sharepoint does a lot of shenanigans to build the content in the iframe (like, calling async requests to get the ribbon bar) - but that would certainly break this code (and you would get the uh oh message in the console).

yes! this did it! Although, now it loads it with the bar in and then it awkwardly disappears, do you know how to fix that? — joshmk, Jan 24 '18 at 23:43
Not exactly, there isn’t much interaction going on between the parent and iframe that can be trapped like the load handler. What about hiding the entire iframe until it loads and the ribbon is removed? — James, Jan 24 '18 at 23:50

Sharepoint Online Can't Hide iFrame ribbon

1 Answers1