How to dynamically resize a Webpart from an app?

Question

I created an App for Sharepoint and within the project added a Webpart.

I wanted this Webpart to grow or decrease dynamically based on its content.

I tried to add some codes from outside the app, but ran into security issues, so I wanted to do this from within the app itself through javascript. That’s possible?

Answer 1

I found this Cross-Omain solution that allows the communication of the App iframe with the parent document.

Javascript looks like this:

window.Communica = window.Communica || {};

Communica.Part = {
    senderId: '',

    init: function () {
        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]);
        }


        this.adjustSize();
    },

    adjustSize: function () {
        var step = 30,
            newHeight,
            contentHeight = $('#userDataContent').height(),
            resizeMessage = '<message senderId={Sender_ID}>resize({Width}, {Height})</message>';

        newHeight = contentHeight + 150;

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

        window.parent.postMessage(resizeMessage, "*");
    }
};

When I click on some part of the iframe that changes its content via javascript function I added at the end of this function the call:

Communica.Part.init();

The #userDataContent could be the iframe body for example, if it reflects the content of the iframe.