title: Cross domain communication between SAPUI5 app and iframe
body: <p>We are integrating third party maps using iframe in XML view.</p>
  
  <p>The requirement is when user clicks on the map(maps are iframe here), I have to get the coordinates of that location.</p>
  
  <p>I am trying to add click event for that iframe but it is not working.</p>
  
  <p>I tried uisng this code  (<a href="http://pbojinov.github.io/iframe-communication/" rel="nofollow noreferrer">http://pbojinov.github.io/iframe-communication/</a>)</p>
  
  <p>Code:</p>
  
  <p>XML view:</p>
  
  <pre><code>  &lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" 
  xmlns:core="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml" 
  height="100%" controllerName="view.Main"&gt;
  &lt;Page&gt;
  &lt;Label text="Iframe Content"/&gt;
      &lt;Input id="mapValue" type="Text" width="20%"&gt;&lt;/Input&gt;
    &lt;IconTabBar id="idIconTabBar" upperCase="true" expanded="{device&gt;/isNoPhone}" class="sapUiResponsiveContentPadding"&gt;
       &lt;items&gt;
          &lt;IconTabFilter text="Search" tooltip="Find Asset/Location"&gt;
             &lt;html:iframe name="iFrameMaptest" id="iFrameContent" src="https://XXXX:XXX../" height="100%" width="100%" /&gt;
          &lt;/IconTabFilter&gt;
       &lt;/items&gt;
    &lt;/IconTabBar&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Controller code:</p>
  
  <pre><code>sap.ui.controller("view.Main", {
  onInit: function () {
      if (this.getView().byId("iFrameContent")) {
          this.getView().byId("iFrameContent").addEventDelegate({
              "onAfterRendering": function () {
                  if (window.addEventListener) {
                      window.addEventListener("message", this.displayMessage.bind(this), false);
                  } else {
                      window.attachEvent("onmessage", this.displayMessage.bind(this));
                  }
              }
          }, this);
      }
  },
  
  onAfterRendering: function () {
      var oHeight = $(document).height();
  
      var oInput = this.getView().byId("mapValue");
  
       var oIframeContent=document.getElementsByTagName("iframe")[0].contentWindow;
  
      // Listen to messages from parent window
      this.bindEvent(window, 'message', function (e) {
        // oInput.setValue(e.data);
      });
      // Send random message data on every button click
      this.bindEvent(oIframeContent, 'click', function (e) {
          var random = Math.random();
          this.sendMessage(""+ random);
  
      });
  
  },
  displayMessage: function (oEvent) {
      sap.m.MessageToast.show("Iframe clciked");
  },
  bindEvent: function (element, eventName, eventHandler) {
      if (element.addEventListener) {
          element.addEventListener(eventName, eventHandler, false);
      } else if (element.attachEvent) {
          element.attachEvent('on' + eventName, eventHandler);
      }
  },
  sendMessage: function (msg) {
      window.parent.postMessage(msg, '*');
  }
  </code></pre>
  
  <p>});</p>
  
  <p>Error:
  Uncaught DOMException: Blocked a frame with origin "<a href="https://XXX.XXX" rel="nofollow noreferrer">https://XXX.XXX</a>.." from accessing a cross-origin frame.</p>