Pass data to iframe page as non-admin
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-31-2024
09:24 AM
Overview of issue
On a Page, I'm trying to pass data that to an html file I'm loading via iframe. The main data I need right now is current user/course data, so passing data from the window.ENV object would be ideal.
I do not need to receive data from iframe.
Receiving data would be helpful, but I know that's a completely different set of issues.
Receiving data would be helpful, but I know that's a completely different set of issues.
Note: I am just an instructor, thus I do not have admin rights.
Sample code from Canvas Page
The pages I load are from a different course, which I use sort of like a repository for shared content. In the URL below, that's the MY_REPO_COURSE_ID.
<iframe style="width: 100%; height: 800px;" src="https://UNIV_SUBDOMAIN.instructure.com/courses/MY_REPO_COURSE_ID/file_contents/course%20files/Repo/C..." allowfullscreen="allowfullscreen"></iframe>
What I've tried
So, so many things. Here are a few of my attempts...
Dynamically add query strings to the src URL
Doesn't work because I can't write JavaScript in the Canvas Page itself
Use postMessage from the parent page
Again, I can't write JavaScript in the Canvas Page itself
Query the API from within the iframe page
The API won't work because the iframe page is served from a CDN with a different domain (e.g., https://a12345-1234567.cluster123.canvas-user-content.com)
Use LTI postMessage from within the iframe page
This almost works! The LTI postMessage tools allow me to pass data to (and from) the iframe page, but it's not flexible enough to pass whatever I need, such as the ENV data.
What to do next
I'm pretty close, so I hope it's just that I'm missing something obvious. I.e., I just haven't come across the right page in the documentation.
Sorry to bother the board with something I figured I'd be able to solve, and I'd be grateful for any ideas or suggestions.