My app for SharePoint Online is a Client Web Part which will have dynamic content. I've tried various code samples that get the Sender ID and set the height and width of the IFrame, the problem is it only works for the width. If I set a fixed height it works but I need the height to be 100% as setting a fixed height renders my app useless. I've spent too much time trying to get what I thought would be an easy fix to find out it's possibly not doable?!?
Here's what I'm doing to try and fix this issue:
<script type="text/javascript">"use strict"; window.iFrameResize = window.iFrameResize || {}; $(document).ready(function () { iFrameResize.Part.init(); }); iFrameResize.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 () { resizeMessage = '<message senderId={Sender_ID}>resize({Width}, {Height})</message>';
resizeMessage = resizeMessage.replace("{Sender_ID}", this.senderId); resizeMessage = resizeMessage.replace("{Height}", "100%"); resizeMessage = resizeMessage.replace("{Width}", "100%"); window.parent.postMessage(resizeMessage, "*"); } };</script>