SAPUI5 应用与 iframe 之间的跨域通信

Question

我们正在 XML 视图中使用 iframe 集成第三方地图。

要求是当用户点击地图时（这里的地图是 iframe），我必须获取该位置的坐标。

我正在尝试为该 iframe 添加点击事件，但它不起作用。

我尝试使用此代码 (http://pbojinov.github.io/iframe-communication/)

代码：

XML 视图：

  <?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>

控制器代码：

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

});

错误： 未捕获的 DOMException：阻止具有源“https://XXX.XXX..”的框架访问跨域框架。

Answer 1

这与其说是一个 SAPUI5 问题，不如说是一个一般的 Web 开发问题。检查以下帖子：

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

您也可以使用反向代理来解决此限制。