عرض جزء التطبيق iFrame يصل إلى 100%

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

  •  10-12-2019
  •  | 
  •  

سؤال

لقد نجحت في إنشاء جزء التطبيق باستخدام تطبيق عالي الثقة يستضيفه الموفر.

يستخدم التطبيق bootstrap ويحتوي على محتوى ديناميكي يناسب حجم الصفحة.المشكلة هي أنه عندما أقوم بنشر جزء التطبيق/الويب، يكون لإطار 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