عرض جزء التطبيق iFrame يصل إلى 100%
-
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, "*");
}
};