-
-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix ipynb files not being viewable on github
- The file is rendered in an iframe which crashes when it receives a message via window.postMessage - This change switches to using a push vs pull method for obtaining frame IDs. Child iframes broadcast their frame ID info instead of the parent requesting it obviating the need to use window.postMessage on the child iframe.
- Loading branch information
1 parent
eb30da8
commit 772643b
Showing
2 changed files
with
83 additions
and
101 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,86 +1,93 @@ | ||
| import { v4 as uuidv4 } from 'uuid'; | ||
|
|
||
| export class FrameInfoListener { | ||
| export class FrameInfoBroadcaster { | ||
| readonly frameId = uuidv4(); | ||
| private _windowMessageListener?: (event: MessageEvent) => void; | ||
| private _broadcastInterval?: NodeJS.Timeout; | ||
| private _bound = false; | ||
|
|
||
| bind() { | ||
| this._windowMessageListener = (event) => { | ||
| if (event.data.sender !== 'asbplayer-video') { | ||
| return; | ||
| } | ||
| if (this._bound) { | ||
| return; | ||
| } | ||
|
|
||
| if (event.source !== window.parent) { | ||
| return; | ||
| } | ||
| this._broadcastInterval = setInterval(() => this._broadcast(), 10000); | ||
| this._broadcast(); | ||
| this._bound = true; | ||
| } | ||
|
|
||
| switch (event.data.message.command) { | ||
| case 'frameId': { | ||
| window.parent.postMessage( | ||
| { | ||
| sender: 'asbplayer-video', | ||
| message: { | ||
| requestId: event.data.message.requestId, | ||
| frameId: this.frameId, | ||
| }, | ||
| }, | ||
| '*' | ||
| ); | ||
| } | ||
| } | ||
| }; | ||
| window.addEventListener('message', this._windowMessageListener); | ||
| private _broadcast() { | ||
| window.parent.postMessage( | ||
| { | ||
| sender: 'asbplayer-video', | ||
| message: { | ||
| frameId: this.frameId, | ||
| }, | ||
| }, | ||
| '*' | ||
| ); | ||
| } | ||
|
|
||
| unbind() { | ||
| if (this._windowMessageListener) { | ||
| window.removeEventListener('message', this._windowMessageListener); | ||
| if (this._broadcastInterval !== undefined) { | ||
| clearInterval(this._broadcastInterval); | ||
| this._broadcastInterval = undefined; | ||
| } | ||
|
|
||
| this._bound = false; | ||
| } | ||
| } | ||
|
|
||
| export const fetchFrameId = (frame: HTMLIFrameElement): Promise<string | undefined> => { | ||
| return new Promise((resolve, reject) => { | ||
| if (!frame.contentWindow) { | ||
| return resolve(undefined); | ||
| export class FrameInfoListener { | ||
| readonly iframesById: { [key: string]: HTMLIFrameElement } = {}; | ||
| private _listener?: (event: MessageEvent) => void; | ||
| private _bound = false; | ||
|
|
||
| bind() { | ||
| if (this._bound) { | ||
| return; | ||
| } | ||
|
|
||
| const requestId = uuidv4(); | ||
| let timeoutId: NodeJS.Timeout | undefined; | ||
| const listener = (event: MessageEvent) => { | ||
| if (event.source !== frame.contentWindow) { | ||
| this._listener = (event: MessageEvent) => { | ||
| if (event.data?.sender !== 'asbplayer-video') { | ||
| return; | ||
| } | ||
|
|
||
| if (event.data.message?.requestId !== requestId) { | ||
| const sourceIframe = this._sourceIframeForEvent(event); | ||
|
|
||
| if (sourceIframe === undefined) { | ||
| return; | ||
| } | ||
|
|
||
| if (typeof event.data.message?.frameId === 'string') { | ||
| if (timeoutId) { | ||
| clearTimeout(timeoutId); | ||
| } | ||
| const frameId = event.data.message.frameId; | ||
|
|
||
| window.removeEventListener('message', listener); | ||
| resolve(event.data.message.frameId); | ||
| if (!frameId) { | ||
| return; | ||
| } | ||
|
|
||
| this.iframesById[frameId] = sourceIframe; | ||
| }; | ||
|
|
||
| window.addEventListener('message', listener); | ||
| frame.contentWindow.postMessage( | ||
| { | ||
| sender: 'asbplayer-video', | ||
| message: { | ||
| command: 'frameId', | ||
| requestId: requestId, | ||
| }, | ||
| }, | ||
| '*' | ||
| ); | ||
| window.addEventListener('message', this._listener); | ||
| this._bound = true; | ||
| } | ||
|
|
||
| timeoutId = setTimeout(() => { | ||
| window.removeEventListener('message', listener); | ||
| resolve(undefined); | ||
| }, 1000); | ||
| }); | ||
| }; | ||
| unbind() { | ||
| if (this._listener !== undefined) { | ||
| window.removeEventListener('message', this._listener); | ||
| this._listener = undefined; | ||
| } | ||
|
|
||
| this._bound = false; | ||
| } | ||
|
|
||
| private _sourceIframeForEvent(event: MessageEvent) { | ||
| const iframes = document.getElementsByTagName('iframe'); | ||
| for (const iframe of iframes) { | ||
| if (iframe.contentWindow === event.source) { | ||
| return iframe; | ||
| } | ||
| } | ||
|
|
||
| return undefined; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters