Page Viewer Webpart (iframe) Auto Resize based on Content

Question

How to auto resize height/width of a Page Viewer Webpart(iframe) based on content(No Scrollbars), similar to this link using PostMessage?

Could someone pls help me on this ?

Thanks

Answer 1

The below script works for me:

<script type="text/javascript">
"use strict";
window.Communica = window.Communica || {};

$(window).on("load", function () {
    Communica.Part.init();
});


Communica.Part = {
    senderId: '',   // the App Part provides a Sender Id in the URL parameters,
    // every time the App Part is loaded, a new Id is generated.
    // The Sender Id identifies the rendered App Part.

    init: function () {
        // parse the URL parameters and get the Sender Id
        var params = document.URL.split("?")[1].split("&");
        for (var i = 0; i < params.length; i = i + 1) {
            var param = params[i].split("=");
            if (param[0].toLowerCase() == "senderid")
                this.senderId = decodeURIComponent(param[1]);
        }

        // make an initial resize (good if the content is already bigger than the App Part)
        this.adjustSize();
    },

    adjustSize: function () {
        // Post the request to resize the App Part
        var step = 30,
            newHeight,
            contentHeight = $('body').height() + 7, // the App Part height
                                                    // (now it's 7px more than the body)
            resizeMessage = '<message senderId={Sender_ID}>resize({Width}, {Height})</message>';

        newHeight = Math.floor(contentHeight / step) * step +
                step * Math.ceil((contentHeight / step) - Math.floor(contentHeight / step));

        resizeMessage = resizeMessage.replace("{Sender_ID}", this.senderId);
        resizeMessage = resizeMessage.replace("{Height}", newHeight);
        resizeMessage = resizeMessage.replace("{Width}", "100%");

        window.parent.postMessage(resizeMessage, "*");
    }
};
</script>

Answer 2

Instead of Page View webpart try using ContentEditor or ScriptEditor webpart

<iframe id="MyFrame" src="/pages/testpage.aspx" scrolling="no" frameborder="0" border="0" style="height:100% !important;width:100% !important; overflow:auto !important" onload="setIframeHeight('MyFrame')"></iframe>
<script type="text/javascript"> 
  function setIframeHeight(iframeName)
  {
      var iframeWin = window.frames[iframeName];
      var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
      if (iframeEl && iframeWin) 
      {
        iframeEl.style.height = "auto"; // helps resize if new page is shorter than previous
        iframeEl.style.height = 100 + "%";
      }
  } 
</script>

http://sharepointcore.blogspot.com/2011/08/sharepoint-pageviewer-webpart-resize.html