Width and Height of iframe using content item select

[justinball]

When I embed an iframe via a content item select I specify displayWidth and displayHeight under placementAdvice. The values I send are set as a style on the iframe but the iframe also ends up with width="300" and height="150". Is there a reason those values get set alongside the style? Do I need to send something different in the content item selection response?

Thanks,

Justin

[James]

 @justinball  

I had to do a little research, so I may be way off. I apologize ahead of time if I'm sending you down the wrong path.

After all my research into what displayHeight and displayWidth were, I came back to the first thing I thought of -- that it's inside an iframe. It's actually the first thing that comes to my mind anyone questions the sizing of LTI tools that aren't opened in their own window/tab.

The introduction to the Content Items specification says:

The Content-Item Message allows a Tool Provider (TP) to be involved in the process of adding items to a content page within a Tool Consumer (TC). The TP is launched by the TC with the ContentItemSelectionRequest message type allowing the TP to provide the user with an interface for selecting one, or more, items for placement into the TC. This JSON binding describes the format used to return the selected items back to the TC.

That makes it sound like the LTI (tool provider TP) is the one that uses displayHeight and displayWidth, not Canvas (tool consumer TC). One way of testing this might to be to edit the iframe tag in Canvas to be larger than than the displayHeight and displayWidth and see if they come out smaller than the iframe element. That would be up to you as a tool provider to specify the size, which you may or may not have done.

Regardless of how that really works in the background, I think the root issue is that Canvas embeds the LTI tool inside an iframe. That iframe is created when the content is put on the page and not when the content is launched. That iframe acts as a sandbox and things inside the iframe can't manipulate parent items, which is where the size of the iframe is specified, and is unable to change the width and height on the iframe.

The 300x150 window is telling Canvas how big to make the iframe and it can launch an LTI to go into the space, but beyond that, it is unaware of what goes inside that iframe. For security purposes, the LTI can't directly manipulate the actual size of the iframe because it's from a different domain. Unless the content inside the iframe is loaded from the same domain (including hostname) as the Canvas page itself, it becomes subject to the Same-origin policy and the two windows (Canvas as the parent window and the LTI tool in the iframe) have very limited ability to communicate with each other. Note that window.document is not one of the things shared.

Window.postMessage() is the recommended way to have communicate between documents from different domains. H5P recommends/supplies a window resizer script for use with Canvas. In either case, you need to make the parent window aware of what's happening by placing custom JavaScript into Canvas and you need to make the child window (LTI) talk to the parent by placing JavaScript in the embedded content.

[justinball]

Hi James,

Thanks for the response. As the tool provider I think we can just set the width of the html to 100%. Height is trickier since it frequently changes based on the content loaded into the screen.

Here's the json we send back in response to the content item selection request:

{
  "@context": [
    "http://purl.imsglobal.org/ctx/lti/v1/ContentItem"
  ],
  "@graph": [
    {
      "@type": "LtiLinkItem",
      mediaType: "application/vnd.ims.lti.v1.ltilink",
      title: "Open Assessments",
      url: "https://oea.atomicjolt.xyz/lti_launches",
      placementAdvice: {
        displayWidth: "100%",
        displayHeight: "800px",
        presentationDocumentTarget: "iframe",
      }
    }
  ]
}

We request that Canvas do an LTI launch inside an iframe and that the iframe have a width of 100% and a height of 800px. That works and we end up with an iframe doing and LTI launch (which is awesome) that looks like this:

<iframe style="width: 100%; height: 800px;" 
  title="Example" 
  src="https://atomicjolt.instructure.com/courses/253/external_tools/retrieve?display=borderless&amp;url=https%3A%2F%2Foea.atomicjolt.xyz%2Flti_launches" 
  width="300" 
  height="150"></iframe>

We are successful in setting the style on the iframe but we still end up with the html attributes width and height being set to 300 and 150. The style attribute ends up winning but I'm wondering if Canvas sets a default value on all iframes embedded in content for some reason or if there are additional attributes that we need to send in placementAdvice.

As an aside I think there used to be messages that you could send via postMessage to Canvas to request that the iframe be resized. I think it was "lti.frameResize", but that might have just been for internal use.

Thanks,

Justin

[James]

I feel like I'm getting more help from you than you are from me. I didn't even know about the lti.frameResize thing, but I can think of several questions in the Community that I could have provided different answers for if I could figure out how to use it.

I've been pouring through the source code for the last half-hour or so looking for hard-coded values. I looked for files that had both 300 and 150 in them somewhere. Most applied to tinyMCE.

According to the IMS spec, there aren't any other options for placementAdvice.

This is technically an LTILinkItem, but it doesn't provide anything either, referring back to placementAdvice that it inherits from a ContentItem.

There is some documentation at EduApps on their Content Extension page that lists some extensions. However, I wonder if that's referring to the deprecated portion instead of the content item as documented in the API. It also says that the width and height set the "style" of the embedded iframe, rather than the dimensions on the element itself.

Maybe Canvas is adding that so that it works across devices and on the mobile apps? Maybe it's there for a fallback in case someone doesn't return a placementAdvice and they didn't strip it out once that was supplied.