Ширина iFrame части приложения до 100 %.

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

  •  10-12-2019
  •  | 
  •  

Вопрос

Я успешно создал часть приложения, используя приложение с высоким уровнем доверия, размещенное у поставщика.

Приложение использует загрузку и имеет динамический контент, соответствующий размеру страницы.Проблема в том, что когда я публикую приложение/веб-часть, сгенерированный iFrame и содержащий div имеют фиксированную высоту и ширину.

Все, что мне нужно, это чтобы сгенерированный iFrame для моей части приложения имел свойство width=100% и мой div class= "ms-webpart-chrome-title" без какого-либо свойства ширины (по умолчанию он получает значение 300px).

Я могу изменить все это прямо в Chrome и увидеть изменения, но понятия не имею, где это настроить в моем приложении SharePoint!

Заранее спасибо

Это было полезно?

Решение

У меня на днях возникла эта проблема (но с ростом).Ключевым моментом является использование postMessage для установки ширины iframe.Это сработало для меня (поместите в файл .aspx приложения): 

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

Заменять #userDataContent с вашей main div id имя

Вот где я нашел информацию (как видите, мой сценарий практически идентичен): http://ctp-ms.blogspot.com/2013/03/resizing-app-parts-with-postmessage-in.html

Другие советы

что я сделал с этим, так это то, что я сначала создал ширину, воссоздал высоту и ширину, чтобы не получить перекошенную высоту.

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, "*");
                }
            };
Лицензировано под: CC-BY-SA с атрибуция
Не связан с sharepoint.stackexchange
scroll top