25:["$","title",null,{"children":"iframe to parent postMessage | btheado | Observable"}] 49:[] 29:{"id":"011d3f3f91737286","slug":null,"title":"iframe to parent postMessage","thumbnail":"e5cf1f0ad9be3d78d79788e53ab810e486aa9be27900ec91b8fa4d7cb70b3301","access_level":"public","create_time":"$D2025-02-15T14:54:56.667Z","update_time":"$D2025-02-15T16:16:03.332Z","view_time":null,"first_public_time":"$D2025-02-15T16:18:02.627Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2c0fcccea99387d7","login":"btheado","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8315783a6ce8d9c8019f396006c77dcba615bbc93819e5644a289a7ca704ffcf","tier":"starter_2024","bio":"","following":false},"version":45,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"46fc8e968a5255ec","login":"btheado","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8315783a6ce8d9c8019f396006c77dcba615bbc93819e5644a289a7ca704ffcf","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"2c0fcccea99387d7","login":"btheado","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8315783a6ce8d9c8019f396006c77dcba615bbc93819e5644a289a7ca704ffcf","tier":"starter_2024","role":"editor"},{"type":"individual","id":"46fc8e968a5255ec","login":"btheado","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8315783a6ce8d9c8019f396006c77dcba615bbc93819e5644a289a7ca704ffcf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"iframe to parent postMessage","cells":[{"id":0,"value":"# iframe to parent postMessage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"Here is an iframe with a button to post a message to the parent:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"Object.assign(document.createElement('iframe'), {\n width: \"50%\",\n height: \"100\",\n srcdoc: srcdoc\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"Use `Generators.observe` to convert the data from the posted message into an observable variable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"iframe_message = Generators.observe(notify => {\n const onmessage = (event) => notify(event.data);\n notify(\"\");\n addEventListener(\"message\", onmessage);\n return () => removeEventListener(\"message\", onmessage);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"The html to load into the iframe:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"srcdoc = `\n \n \n \n \n \n \n \n

iframe

\n \n \n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null