Skip to content

Instantly share code, notes, and snippets.

@seavor

seavor/iframe-investigation.md

Last active January 12, 2016 19:43
Show Gist options
  • Save seavor/ed9aee4a6dd7dd4f19c5 to your computer and use it in GitHub Desktop.
Save seavor/ed9aee4a6dd7dd4f19c5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
iframe-investigation.md

Ideas For iFrame communication between self and dashboard

w/ window.postMessage()

  1. Site loads

  2. Load iFrame in initial default state (1st class/1st report)

a) User clicks dashboard link, reload iFrame with new details
b) User clicks iFrame link, iFrame reloads self and sends
  window.postMessage() to Dashboard with details to update UI

w/out window.postMessage()

  1. same

  2. same

a) same
b) User clicks iFrame link, reloads dashboard state with new url via a.target=_parent
  (eg: site.com/data/this-class/some-report => site.com/data/this-class/another-report)

Possibilities & Hurdles

  • May have to "teach" angular to intercept a state change request from the iFrame, so that the entire page doesnt unecessarily reload. Ideally, angular's routing should already intercept and load the necessary views based on it's parent/child state relationships, but I'm uncertain of this when using iFrames to link to a new url.

  • If dashboard and all other iFrame navigation is controlled by the iFrame, we would only have to communicate URL updates to the angular/root frame, which should be possible with either window.postMessage() or ideally simple anchor tags w/ target="_parent". More research is necessary to confirm this. The state controller for the dashboard should be able to monitor these changes either way, and react or store anything we may need it to in response apart from whatever the iFrame is doing for itself.

  • base.target="_parent" may be something to look at, but inital investigation points to it anchoring the _parent tag to the iFrame, and not the host frame.

  • Using Forms to update and POST data to the iFrame. This is probably a redundant capability, but may be something to refer back to if we start hitting some pretty high walls with the newer, more promising methods.

Links

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment