{"id":604,"date":"2017-02-01T17:14:05","date_gmt":"2017-02-01T16:14:05","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=604"},"modified":"2022-07-25T08:35:46","modified_gmt":"2022-07-25T07:35:46","slug":"child-parent-iframe-communication","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/child-parent-iframe-communication\/","title":{"rendered":"Child &#038; Parent iframe communication"},"content":{"rendered":"<pre lang=\"javascript\">define(['bluebird', 'jquery'], function () {\r\n    var Promise = require('bluebird');\r\n    var $ = require('jquery');\r\n\r\n    var getWindowFromElement = function(element) {\r\n\t\tvar $e = $(element);\r\n\t\tvar e = $e[0];\r\n\t\tvar doc = e.ownerDocument;\r\n\t\tvar win = doc.defaultView || doc.parentWindow;\r\n\t\treturn win;\r\n\t};\r\n\r\n    var defer = function() {\r\n        var res, rej;\r\n        var promise = new Promise(function(resolve, reject) {\r\n            res = resolve;\r\n            rej = reject;\r\n        });\r\n        return {\r\n            promise: promise,\r\n            resolve: res,\r\n            reject: rej,\r\n        };\r\n    };\r\n\r\n    var ParentWidget = function($parent, settings) {\r\n        this.init($parent, settings);\r\n    };\r\n\r\n    ParentWidget.prototype.init = function($parent, settings) {\r\n        var self = this;\r\n        self.$parent = $parent;\r\n        self.window = getWindowFromElement($parent);\r\n        self.$frame = $('<iframe loading=\"lazy\" class=\"widget\" src=\"theme\/widgets\/widget.html\" width=\"300\" height=\"150\"><\/iframe>'); self.$parent.append(this.$frame); self.settings = settings; self.deferInitialized = defer(); self.deferLoaded = defer(); self.deferPlayed = defer(); self.lastMessage = new Date(); \/\/ for timeout and hang calculation self.window.addEventListener(\"message\", function(event) { return self.onMessage(event); }, false); }; ParentWidget.prototype.sendMessage = function(message) { var self = this; var str = JSON.stringify(message); \/\/console.log('Parent: Send:', str); self.$frame[0].contentWindow.postMessage(str, '*'); }; ParentWidget.prototype.onMessage = function(event) { var self = this; if (event.source === self.$frame[0].contentWindow) { try { \/\/console.log('Parent: Received:', event.data); self.lastMessage = new Date(); \/\/ widget is still busy sending messages to us var data = JSON.parse(event.data); switch(data.widgetEvent) { case 'initialized': self.deferInitialized.resolve(); break; case 'loaded': self.deferLoaded.resolve(); break; case 'played': self.deferPlayed.resolve(); break; } } catch(e) { \/\/ !ignore any json errors } } }; ParentWidget.prototype.load = function() { var self = this; return self.deferInitialized.promise.timeout(10000).then(function() { self.sendMessage({ widgetAction: 'load', settings: self.settings }); return self.deferLoaded.promise; }) .catch(Promise.TimeoutError, function(e) { console.log(\"Could not load widget in 10000ms\"); return Promise.resolve(); }); }; ParentWidget.prototype.play = function() { var self = this; self.sendMessage({ widgetAction: 'play', settings: self.settings }); var playTimeout = self.settings.duration; if (playTimeout &lt; 1) { return self.deferPlayed.promise; } else { return self.deferPlayed.promise.timeout(playTimeout) .catch(Promise.TimeoutError, function(e) { return Promise.resolve(); }); } }; return ParentWidget; });<\/pre>\n<pre lang=\"javascript\">\r\ndefine(['bluebird'], function () {\r\n    var Promise = require('bluebird');\r\n\r\n    var ChildWidget = function() {\r\n        this.init();\r\n    };\r\n\r\n    ChildWidget.prototype.init = function() {\r\n        var self = this;\r\n        self.settings = {};\r\n\r\n        window.addEventListener(\"message\", function(event) {\r\n            return self.onMessage(event);\r\n        }, false);\r\n    };\r\n\r\n    ChildWidget.prototype.sendMessage = function(message) {\r\n        var str = JSON.stringify(message);\r\n        \/\/console.log('Child: Send:', str);\r\n        window.parent.postMessage(str, '*');\r\n    };\r\n\r\n    ChildWidget.prototype.onMessage = function(event) {\r\n        var self = this;\r\n        if (event.source === window.parent.parent || event.source === window.parent) {\r\n            try {\r\n                \/\/console.log('Child: Received:', event.data);\r\n                var data = JSON.parse(event.data);\r\n                switch(data.widgetAction) {\r\n                    case 'load': self.load(data.settings); break;\r\n                    case 'play': self.play(); break;\r\n                }\r\n            } catch(e) {\r\n                \/\/ !ignore any json errors\r\n            }\r\n        }\r\n    };\r\n\r\n    ChildWidget.prototype.sendInitialized = function(settings) {\r\n        var self = this;\r\n        self.sendMessage({ widgetEvent: 'initialized' });\r\n    };\r\n\r\n    ChildWidget.prototype.load = function(settings) {\r\n        var self = this;\r\n        self.settings = settings;\r\n        if (typeof self.onload === 'function') {\r\n            self.onload();\r\n        }\r\n    };\r\n\r\n    ChildWidget.prototype.setLoaded = function(settings) {\r\n        var self = this;\r\n        self._loaded = true;\r\n        self.sendMessage({ widgetEvent: 'loaded' });\r\n    };\r\n\r\n    ChildWidget.prototype.play = function() {\r\n        var self = this;\r\n        if (typeof self.onplay === 'function') {\r\n            self.onplay();\r\n        }\r\n    };\r\n\r\n    ChildWidget.prototype.setPlayed = function(settings) {\r\n        var self = this;\r\n        self._played = true;\r\n        self.sendMessage({ widgetEvent: 'played' });\r\n    };\r\n\r\n    return ChildWidget;\r\n});\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>define([&#8216;bluebird&#8217;, &#8216;jquery&#8217;], function () { var Promise = require(&#8216;bluebird&#8217;); var $ = require(&#8216;jquery&#8217;); var getWindowFromElement = function(element) { var $e = $(element); var e = $e[0]; var doc = e.ownerDocument; var win = doc.defaultView || doc.parentWindow; return win; }; var defer = function() { var res, rej; var promise = new Promise(function(resolve, reject) { res [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5,4],"tags":[],"class_list":["post-604","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=604"}],"version-history":[{"count":1,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/604\/revisions"}],"predecessor-version":[{"id":605,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/604\/revisions\/605"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}