Parte do aplicativo iFrame width 100%

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

  •  10-12-2019
  •  | 
  •  

Pergunta

Eu criado com êxito uma Parte do Aplicativo usando um provedor hospedado alta confiança App.

O app utiliza o bootstrap e tem conteúdo dinâmico para ajuste de tamanho de página.O problema é que quando eu publicar o Aplicativo/Web Part, gerado iFrame e div contendo ter corrigido altura e largura.

Tudo que eu preciso é que o gerado iFrame para o meu App Parte tem a propriedade de width=100% e o meu div class= "ms-webpart-chrome-title" sem qualquer propriedade de largura (ele fica um padrão de 300px).

Eu posso mudar tudo isso diretamente no chrome e ver as alterações, mas eu não tenho nenhuma idéia de onde configurar isso no meu SharePoint App!

Obrigado Antecipadamente

Foi útil?

Solução

Eu só tinha esse problema no outro dia (mas com a altura).A chave é usar postMessage para definir a largura do iframe.Isso funcionou para mim (colocar no .arquivo aspx do aplicativo): 

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

Substituir #userDataContent com o seu main div id nome

Aqui é onde eu encontrei a informação (como você pode ver o meu script é quase idêntico): http://ctp-ms.blogspot.com/2013/03/resizing-app-parts-with-postmessage-in.html

Outras dicas

o que eu fiz com esse é que eu criei a largura da primeira, recriado a altura e largura para não ficar a espetada de altura.

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 em: CC-BY-SA com atribuição
Não afiliado a sharepoint.stackexchange
scroll top