应用程序部分iFrame宽度为100%

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

  •  10-12-2019
  •  | 
  •  

题

我使用提供商托管的高信任应用程序成功创建了应用程序部分。

该应用程序使用bootstrap，并具有动态内容以适应页面大小。问题是，当我发布应用程序/Web部件时，生成的iFrame和包含div具有固定的高度和宽度。

我所需要的只是为我的应用程序部分生成的iFrame具有 width=100% 和我的div class= "ms-webpart-chrome-title" 没有任何宽度属性（它得到一个默认的 300px).

我可以直接在chrome上更改所有这些并查看更改，但我不知道在我的SharePoint应用程序上在哪里配置此功能！

先谢谢你

有帮助吗？

解决方案

前几天我刚刚遇到了这个问题（但身高）。关键是使用postMessage设置iframe的宽度。这对我有用（放在.app的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 和 归因
scroll top