I have a problem trying to resize an iframe inside a Sharepoint environment through Cross Domain. I've tried a bunch of solutions found on the net and nothing works except Baker Humadi's solution near the end about postMessage:
https://stackoverflow.com/a/15558627/2171556
I added a Script Editor to the Sharepoint page with the following (My iframe URL is of course pointing to my child page):
<script>
// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child window
eventer(messageEvent,function(e) {
document.getElementById('frame').height = e.data + 'px';
},false);
</script>
<iframe id="frame" src="childpage" scrolling="no"></iframe>
On the child page I've included the following (RestSection is being populated by some other means so please ignore content in this post):
<script type="text/javascript">
window.onload = function()
{
var actual_height = document.getElementById('RestSection').scrollHeight;
parent.postMessage(actual_height,"childpage");
//* allows this to post to any parent iframe regardless of domain
}
</script>
<div id="RestSection">
//List of things
</div>
When I am editing the code snippet in Sharepoint it is actually resizing the page as it should. When I Check In it stops working and I've noticed the height is set quite strange - perhaps some postMessage object?:
<iframe id="frame" src="childpage" scrolling="no" height="{"command":"RequestSuccess","requestIndex":1,"result":null}px"></iframe>
I don't understand why it works when I am editing the page in Sharepoint but suddenly does'nt when I check it In. Has anyone seen this behaviour before or could in some way enlighten me?
