Hiding the Ribbon in an IFrame

Question

I have a JQuery UI Tab Web Part which loads iframe pages on demand. I want to hide the ribbon in each of these pages but the problem is the delay which makes the page jump

    function setFrameStyle() {

        var mySiteIframe = $("iframe");
        mySiteIframe.load(function(){
            //Hide the suite bar
            mySiteIframe.contents().find("#s4-ribbonrow").css('display', 'none');                   
        });
    }


    function chgPage(pagename) {
        // check if Pagename exists
        var httprequest = new XMLHttpRequest();
        httprequest.open('HEAD', pagename, false);
        httprequest.send();

         if (httprequest.status == "404") {
            alert("Could not this information.");
        } else {

            var webparts=document.getElementsByTagName("iframe");

            for (i=0; i<webparts.length; i++) {
                if (webparts[i].title="CPSTabContent")
                    webparts[i].src=pagename;
                    webparts[i].target=webparts[i].name;
            }
        }

<div id="tabs">
    <ul>
        <li><a href="#tabs-1"
        onclick="javascript: chgPage(window.location.href.substr(0,window.location.href.indexOf('Pages/')+6)+'tracking.aspx?isdlg=1'); return false;">Tracking</a></li>
    <li><a href="#tabs-2"
        onclick="javascript: chgPage(window.location.href.substr(0,window.location.href.indexOf('Pages/')+6)+'scope.aspx?isdlg=1');return false;">Scope</a></li>
    </ul>
</div>

I have to call the .load function so it can actually find the Ribbon element but this causes a jump in the page once it hides it. My question is, is there a quicker way to time this function so that there is no page jump? I don't want to edit the iframe source page as there are way too many

Answer 1

Just add this in the code. it works for iframes too

<script>
_spBodyOnLoadFunctionNames.push(“HideBrandingsuite”);
function HideBrandingsuite()
{
SetFullScreenMode(true);
}

</script>

Answer 2

Please try to append the stylesheet into iFrame using below code. It actually works for me before in one solution.

function setFrameStyle() {

        $('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  #s4-ribbonrow{display:none;}  </style>"));
  });
}

Answer 3

I was having same issue when i need to set CSS color for some element and it was over written with default CSS.

So I just used some tricky way for that.

Please try following code once and let me know its worked for you or not. Because it worked for me.

function setFrameStyle() {

        var mySiteIframe = $("iframe");
        mySiteIframe.load(function(){
            //Hide the suite bar
    setTimeout(function () {
            mySiteIframe.contents().find("#s4-ribbonrow").css('display', 'none'); },500);                   
        });
    }