Skip to content

Hide header of Sharepoint custom list displayed in iframe

I have a custom list from a different sharepoint site (still the same domain) that I would like to display on my work site without the header (at a minimum, but getting rid of the ribbon would be nice too). I have attempted 4 methods without success listed below:

1) I can’t even get it to work on a normal page by adding ?isdlg=1 to the end of my url (ie ..allitems.aspx?isdlg=1)

2) since I mostly work with SQL and not HTML I am sure I may have screwed up some of my tags.

<div class="ms-dlgFrameContainer">
<iframe width="1400" height="600" id="DlgFramee" class="ms-dlgFrame" frameborder="0" src="myurl.aspx">
<html class="ms-dialog">
<style type="text/css">
.ms-dialog #titleAreaBox { display:none }

3) to hide the header of the page inside the iframe.

<script type="text/javascript">
document.getElementById("myiframe1").contentWindow.document.getElementById("titlerow").style.display = "none"; </script>`

4) Most promising. When I add

<iframe id="myiframe1" src="myurl" width="1000" height="450" frameborder="1"></iframe>
#titleAreaBox { display: none }

in the same CEWP as my iframe, it removes the title area for current page and not the page in the iframe. This exactly what I want except I want it to do that for the page inside the iframe.

5) I did this as well even just trying to change header color but didn’t notice any change. I looked up the correct webpart ID.

<style type="text/css">
#MSOZoneCell_WebPartWPQ2 .ms-WPHeader
{ background-color: pink; }



You could try below jQuery script, I just hide suiteBarTop in demo.

<iframe id="myiframe" width="1400" height="600" id="DlgFramee" class="ms-dlgFrame" frameborder="0" src="/sites/tst/SitePages/Home.aspx"></iframe>

<script type="text/javascript" src=""></script>
    <script type="text/javascript">
        $(function () {
            $('#myiframe').load(function () {

User contributions licensed under: CC BY-SA
5 People found this is helpful