lti.frameResize does not work on <iframe> in Canvas Student app but works on Desktop and Mobile browsers?

[mutona]

Using the lti.frameResize postMessage to send the height of an iframe to its full content height on assignment pages. This iframe is simple html content from a self authored external resource.

This works great on a desktop browser and on a mobile device when using a browser. When the page is viewed in the Canvas Student app the iframe is not full height. It is as if the app is not receiving the postMessage about the iframe height.

Is there a special way that lti.frameResize needs to be sent so the Canvas student app can use it to size the iframe? I could tell students to only use the browser but I know they will use the app so it should work there as well.

Code used to send the postMessage is below. It is the same format as the examples on the Canvas guide using window postMessages. Instead of hardcoding the height value, the example below gets the scrollHeight so it works at all browser widths and can be resent if the browser window resizes. This works perfect and the iframe content is seamless in the browser view but not in the app.

window.top.postMessage(JSON.stringify({
    subject:"lti.frameResize", height: document.documentElement.scrollHeight + "px"
}), "*");

[michael21]

We set it to the content height when it's displayed in an iframe on CanvasLMS.  Following is an example:

const message = JSON.stringify({
  subject: 'lti.frameResize',
  height: document.body.clientHeight,
})

parent.postMessage(message, '*')