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">
<head>
<style type="text/css">
.ms-dialog #titleAreaBox { display:none }
</style>`

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>
<style>
#titleAreaBox { display: none }
</style>

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; }
</style>

Answer

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="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#myiframe').load(function () {
                $(this).contents().find('#suiteBarTop').hide();
            });

        })        
    </script>

Advertisement

Answer