2

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

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>
0

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

  • Thanks for reply.. provided answer not working.. Height is not applying properly.. – SPUser Jun 10 '15 at 5:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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