How do I hide Ribbon in Page Viewer WP, but not the default one?

Question

I have added a Page Viewer Web Part to a default.aspx page and included the url to DispForm.aspx?ID=1 for a list.

However, I don't want the ribbon for DispForm to be displayed in the PVWP.

If I add a Script Editor Web Part with the following CSS, both the Ribbon for DispForm.aspx (within the PVWP) and the Ribbon for Default.aspx is removed.

<style type="text/css">
#s4-ribbonrow {
    display: none;
}
</style>

Does anyone have any advice on how to remove only the ribbon within the Page Viewer web Part?

Answer 1

Edit your DispForm.aspx and add content editor web part (or script editor).

Put the following script inside:

_spBodyOnLoadFunctions.push(function(){
    if(getParameterByName('hide')){
      var ribbon = document.getElementById('s4-ribbonrow');
      ribbon.style.display = 'none'; 
    }
});

function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
} 

In your page viewer put following url: DispForm.aspx?ID=1&IsDlg=1&hide=1

How does it work

The script on DispForm watches if url contains hide query param. If so, ribbon is hided. Javascript-only solution, no jquery required.