在iframe页面中添加/更改css

Question

I have been tasked to use this approach a SharePoint 2013 site, so here goes.

Background: - I have a page in a SharePoint 2013 site, which has a "content editor" webpart displaying a page from within the same domain/site collection. The below code (which is not mine) I have placed in the content editor and it displays the page all fine.

Issue - My requirement is to "remove the globalnav" from the page within the content editor which I presume is using an Iframe. Now I can use the F12 dev tools with IE11 and find the CSS class which is the follow - ms-dialog #globalNavBox and set the display to "none" this is exactly how I want it to look.

The only thing I do not know how to achieve here is how to make this happen via using some sort of code on the page displaying the embedded page.??

this is the code I am using in the content editor to display my page I want to modify.

#mydiv{

width:1280px; height:1000px;
 overflow:hidden;
 ;
}

#myframe{
 ;
 top:-190px;
 left:-100px;
 width:1080px;
 height:1000px;

}
</style>
<div id="mydiv">
<iframe id="myframe" src="/gen/genInduction/Lists...blah scrolling="no"></iframe>&#160;</div>

now I have no idea how to add in the code (if I can) to remove the css .ms-dialog #globalNavBox {display: none;} so that when the page is displayed the globalnav is removed.

I hope this makes sense as this is the first time I have used this site to ask a question. I have also searched endlessly before I asked this question and have tried various things to make this work but I just cant/understand how to make this happen.

Answer 1

Place the following in the page after the iframe

<script>
document.getElementById("myframe").contentDocument.getElementById("globalNavBox").style.display="none";
</script>

Answer 2

I believe you'll still be able to access the iframe's content since they both belong to the same domain, unless the iframe is sandboxed (which the example clearly shows it isn't). Adding to JBiserkov's slick streamlined answer, this will cover some concerns with loading of the iframe. Under many circumstances, an iframe might be a little late to the party, so you should be prepared for that. The following links helped me understand iframes:

Iframes, Onload, and Document.domain

Iframe Tutorials

-Reference to the iframe

var iFrame = document.getElementById('myframe'),

-Reference to the iframe's document object

-This shorthand conditional expression is the key to accessing any content inside the iframed page.

iDoc = iFrame.contentDocument ? iFrame.contentDocument : iFrame.contentWindow.document,

-Reference to the target element #globalNavBox

gNav = iDoc.getElementById('globalNavBox');

-When the iframe is loaded, grab globalNavBox's style to "display" and set to "none"

iframe.onload = function () {
        gNav.style.display = 'none';
};