I've been struggling to resize an iframe within a Sharepoint environment using Cross Domain. Despite trying numerous solutions found online, the only one that seems to work is Baker Humadi's postMessage solution mentioned towards the end:
To implement this, I added a Script Editor to the Sharepoint page with the following code (Replace the iframe URL with your own child page URL):
<script>
// Creating a compatible event handler for IE and other browsers
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listening to messages from child window
eventer(messageEvent, function(e) {
document.getElementById('frame').height = e.data + 'px';
}, false);
</script>
<iframe id="frame" src="childpage" scrolling="no"></iframe>
In the child page, include the following code snippet (RestSection is assumed to be filled by other means):
<script type="text/javascript">
window.onload = function() {
var actual_height = document.getElementById('RestSection').scrollHeight;
parent.postMessage(actual_height, "childpage");
//* This allows posting to any parent iframe regardless of domain
}
</script>
<div id="RestSection">
//List of things
</div>
While editing the code snippet in Sharepoint, the resizing works correctly. However, after checking in, the resizing stops working and I notice the height being set strangely - could it be related to a postMessage object?
<iframe id="frame" src="childpage" scrolling="no" height="{"command":"RequestSuccess","requestIndex":1,"result":null}px"></iframe>
I am puzzled by why it works during editing in Sharepoint but fails after checking in. Has anyone experienced this issue before or can provide some insights?