I have a problem trying to resize an iframe inside a SharePoint Online environment (O365) 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.

I added a Script Editor to the SharePoint page with the following (My iframe URL is of course pointing to my child page):

// 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';

<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;
    //* allows this to post to any parent iframe regardless of domain

<div id="RestSection">
    //List of things

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?

  • I should probably add that I sometimes see the resizing happen for a short time at the load of the page after Check In, but reverts back almost instantly after. I tried debugging with Firebug and could grab the page with the resizing working properly but only until after a new pageload. I tried setting an removeEventHandler so it would only fire once but had no effect.
    – Ghost
    Commented May 30, 2016 at 11:45

1 Answer 1


I ended up checking for a few things:

<script type="text/javascript">
    window.addEventListener("message", function(e){
            if (e.origin !== "childdomain")

            document.getElementById("frame").height = e.data + "px";
        } else {}
    }, false);

I have no clue why but the SharePoint probably had a bunch of events and therefore ended up with something like an object at the end. So I simply checked for an int (expected from childpage) and also kept it within the childdomain origin.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.