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");
            //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);

         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")

<div id="tabs">
        <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>

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

  • Please pass the function by which you load the pages in JQuery UI Tab Web Part.
    – Hardik
    Commented Jun 8, 2016 at 15:52
  • 1
    what happen if you call the page with the attribute "isdlg=1"?
    – Marco
    Commented Jun 8, 2016 at 16:00
  • I added more code @Hardik .. Commented Jun 8, 2016 at 16:57
  • @Marco, I am already using isdlg=1 Commented Jun 8, 2016 at 16:57

3 Answers 3


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

function HideBrandingsuite()


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() {
      .append($("<style type='text/css'>  #s4-ribbonrow{display:none;}  </style>"));
  • Is this working for you?
    – Hardik
    Commented Jun 8, 2016 at 17:27
  • no, still get that delay and the page jump. It's because the code to hide it has to wait for the frame's contents to .load() Commented Jun 8, 2016 at 18:29
  • Can you share the screen shot of the ribbon element?
    – Hardik
    Commented Jun 8, 2016 at 18:35

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");
            //Hide the suite bar
    setTimeout(function () {
            mySiteIframe.contents().find("#s4-ribbonrow").css('display', 'none'); },500);                   
  • This just adds an extra .5s onto the load time and would still delay the page jump after it hides the element Commented Jun 8, 2016 at 16:56
  • I haven't tried your code but in my case it helped me. Have you tried keeping this code? Commented Jun 8, 2016 at 16:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.