앱 부분 iFrame 너비를 100%로 설정

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

  •  10-12-2019
  •  | 
  •  

문제

공급자가 호스팅하는 높은 신뢰도의 앱을 사용하여 앱 파트를 성공적으로 만들었습니다.

앱은 부트스트랩을 사용하며 페이지 크기에 맞는 동적 콘텐츠를 포함합니다.문제는 앱/웹 파트를 게시할 때 생성된 iFrame과 포함 div의 높이와 너비가 고정되어 있다는 것입니다.

필요한 것은 내 앱 파트에 대해 생성된 iFrame에 다음 속성이 있다는 것입니다. width=100% 그리고 내 사업부 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