IFrameAPI.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. /*global ol*/
  2. if (window.ol && !ol.ext) {
  3. ol.ext = {};
  4. }
  5. /** IFrame API create an api and wait the target ready
  6. * @constructor
  7. * @param {string} targetOrigin, default '*'
  8. */
  9. ol.ext.IFrameAPI = function(targetOrigin) {
  10. this.targetOrigin = targetOrigin || '*';
  11. this.id = -1;
  12. this.properties = {};
  13. // Setter api
  14. this.setter = {};
  15. // Listener api
  16. this.listener = {};
  17. // Nothing to do there
  18. if (window.parent === window) return;
  19. // Wait for target ready
  20. window.addEventListener('message', function(e) {
  21. if (e.data.listener) {
  22. if (this.listener[e.data.listener]) {
  23. this.listener[e.data.listener].call(e.data.data);
  24. }
  25. } else {
  26. switch (e.data.api) {
  27. case 'ready': {
  28. this.ready = true;
  29. this.id = e.data.id;
  30. window.parent.postMessage(e.data, this.targetOrigin);
  31. break;
  32. }
  33. case 'getAPI': {
  34. e.data.data = Object.keys(this.setter);
  35. e.data.id = this.id;
  36. window.parent.postMessage(e.data, this.targetOrigin);
  37. break;
  38. }
  39. default: {
  40. if (this.setter[e.data.api]) {
  41. var data = this.setter[e.data.api].call(this, e.data.data);
  42. if (data !== undefined) {
  43. e.data.data = data;
  44. e.data.id = this.id;
  45. window.parent.postMessage(e.data, this.targetOrigin);
  46. }
  47. }
  48. break;
  49. }
  50. }
  51. }
  52. }.bind(this), false);
  53. // ready
  54. window.parent.postMessage({
  55. api: 'ready'
  56. }, this.targetOrigin);
  57. }
  58. /** Add properties
  59. * @param {string} key
  60. * @param {*} value
  61. */
  62. ol.ext.IFrameAPI.prototype.set = function(key, value) {
  63. this.properties[key] = value;
  64. };
  65. /** Get properties
  66. * @param {string} key
  67. * @return {*}
  68. */
  69. ol.ext.IFrameAPI.prototype.get = function(key) {
  70. return this.properties[key];
  71. };
  72. /**
  73. * @typedef {Object} TemplateAPI
  74. * @property {string} name api name
  75. * @property {function} function if return a Transferable it will be send to the iFrame
  76. */
  77. /** Add functions to the API
  78. * @param {Array<TemplateAPI>} list of functions to add to the api
  79. */
  80. ol.ext.IFrameAPI.prototype.setAPI = function(api) {
  81. if (/\bready\b|\bgetAPI\b|\bon\b|\bun\b|\baddInput\b/.test(api)) {
  82. console.error('Bad API key: '+api);
  83. } else {
  84. for (var k in api) {
  85. this.setter[k] = api[k];
  86. window.parent.postMessage({
  87. api: 'getAPI',
  88. id: this.id,
  89. data: [k]
  90. }, this.targetOrigin);
  91. }
  92. }
  93. };
  94. /** Post a message to the iframe
  95. * @param {string} name api name
  96. * @param {Transferable } data object to transfer to the iframe
  97. */
  98. ol.ext.IFrameAPI.prototype.postMessage = function(name, data) {
  99. window.parent.postMessage({
  100. api: name,
  101. id: this.id,
  102. data: data
  103. }, this.targetOrigin);
  104. };
  105. ol.ext.IFrameAPI.prototype.addListener = function(name, listener) {
  106. this.listener[name] = listener;
  107. };