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开发问题。检查以下帖子：

安全错误：阻止具有源的帧访问跨源帧

未捕获的 DOMException：阻止了原点为"http://localhost:8080"的帧访问跨源帧，同时在页面中列出 iframe

您也可以使用反向代理来绕过此限制。