Ancho del iFrame de la parte de la aplicación al 100%

sharepoint.stackexchange https://sharepoint.stackexchange.com//questions/85442

  •  10-12-2019
  •  | 
  •  

Pregunta

Creé con éxito un elemento de aplicación utilizando una aplicación de alta confianza alojada por un proveedor.

La aplicación utiliza bootstrap y tiene contenido dinámico que se adapta al tamaño de la página.El problema es que cuando publico la aplicación/elemento web, el iFrame generado y el div que lo contiene tienen una altura y un ancho fijos.

Todo lo que necesito es que el iFrame generado para mi App Part tenga la propiedad de width=100% y mi div class= "ms-webpart-chrome-title" sin ninguna propiedad de ancho (obtiene un valor predeterminado de 300px).

Puedo cambiar todo esto directamente en Chrome y ver los cambios, ¡pero no tengo idea de dónde configurarlo en mi aplicación SharePoint!

Gracias de antemano

¿Fue útil?

Solución

Tuve este problema el otro día (pero con la altura).La clave es usar postMessage para establecer el ancho del iframe.Esto funcionó para mí (coloque el archivo .aspx de la aplicación): 

<body>
<div id="dynamicContent">
//App content here
</div>


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

    $(document).ready(function () {
        Communica.Part.init();
    });

    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 = (step - (contentHeight % step)) + contentHeight;

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

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

Reemplazar #userDataContent con tu main div id nombre

Aquí es donde encontré la información (como puede ver, mi script es casi idéntico): http://ctp-ms.blogspot.com/2013/03/resizing-app-parts-with-postmessage-in.html

Otros consejos

Lo que hice con esto fue crear el ancho primero, recrear la altura y el ancho para no obtener la altura ensartada.

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.adjustWidth();
                },

                recall: 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.adjustHeight();
                },

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

                    newHeight = (step - (contentHeight % step)) + contentHeight;
                    resizeMessage = resizeMessage.replace("{Sender_ID}", this.senderId);                        
                    resizeMessage = resizeMessage.replace("{Width}", "100%");
                    window.parent.postMessage(resizeMessage, "*");
                },

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

                    newHeight = (step - (contentHeight % step)) + contentHeight;
                    console.log(contentHeight)
                    resizeMessage = resizeMessage.replace("{Sender_ID}", this.senderId);
                    resizeMessage = resizeMessage.replace("{Height}", newHeight);
                    resizeMessage = resizeMessage.replace("{Width}", contentWidth);

                    window.parent.postMessage(resizeMessage, "*");
                }
            };
Licenciado bajo: CC-BY-SA con atribución
scroll top