adding/ changing css in Iframe page

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.

you have no access to code inside the iframe, unless it's code you manually injected (and have access to the iframe contentWindow and contentDocument). If you're loading a site from a different url as embedded content in the iframe: the end. You cannot do anything to it because of security. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Jun 30, 2015 at 0:54
Yup, as @Mike 'Pomax' Kamermans stated, cannot be done unless your iFrame is being loaded from the same domain as your current site. — Michael G
– Michael G, Commented Jun 30, 2015 at 0:58

Jordan Biserkov · Accepted Answer · 2015-06-30 01:04:17Z

1

Place the following in the page after the iframe

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

answered Jun 30, 2015 at 1:04

Jordan Biserkov

6876 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zer00ne · Accepted Answer · 2015-06-30 04:53:08Z

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';
};

Collectives™ on Stack Overflow

adding/ changing css in Iframe page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related