Cross domain communication between SAPUI5 app and iframe

Question

We are integrating third party maps using iframe in XML view.

The requirement is when user clicks on the map(maps are iframe here), I have to get the coordinates of that location.

I am trying to add click event for that iframe but it is not working.

I tried uisng this code (http://pbojinov.github.io/iframe-communication/)

Code:

XML view:

  <?xml version="1.0" encoding="UTF-8"?>
<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">
<Page>
<Label text="Iframe Content"/>
    <Input id="mapValue" type="Text" width="20%"></Input>
  <IconTabBar id="idIconTabBar" upperCase="true" expanded="{device>/isNoPhone}" class="sapUiResponsiveContentPadding">
     <items>
        <IconTabFilter text="Search" tooltip="Find Asset/Location">
           <html:iframe name="iFrameMaptest" id="iFrameContent" src="https://XXXX:XXX../" height="100%" width="100%" />
        </IconTabFilter>
     </items>
  </IconTabBar>

Controller 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, '*');
}

});

Error: Uncaught DOMException: Blocked a frame with origin "https://XXX.XXX.." from accessing a cross-origin frame.

If you have access to the HTML: developer.mozilla.org/en-US/docs/Web/API/Window/postMessage Dont do contentWindow.callfunction() stuff. It never works out on the long run. — Lain

Invalid Username Invalid Username · Accepted Answer · 2019-06-24T13:44:49

This isn't so much a SAPUI5 question, as a general web development question. Check the following posts:

SecurityError: Blocked a frame with origin from accessing a cross-origin frame

Uncaught DOMException: Blocked a frame with origin “http://localhost:8080” from accessing a cross-origin frame while listing the iframes in page

You could also use a reverse proxy to get around this limitation.

Cross domain communication between SAPUI5 app and iframe

1 Answers