Междоменная связь между приложением SAPUI5 и iframe - PullRequest
Новая
       22

Междоменная связь между приложением SAPUI5 и iframe

0 голосов
/ 24 июня 2019

Мы интегрируем сторонние карты, используя iframe в представлении XML.

Требование заключается в том, что когда пользователь нажимает на карту (здесь отображаются карты 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, '*');
}

});

Ошибка: Uncaught DOMException: заблокирован фрейм с источником "https://XXX.XXX.." от доступа к фрейму перекрестного происхождения.

1 Ответ

0 голосов
/ 24 июня 2019

Это не столько вопрос SAPUI5, сколько общий вопрос веб-разработки.Проверьте следующие сообщения:

SecurityError: заблокирован фрейм с источником при доступе к фрейму перекрестного происхождения

Uncaught DOMException: заблокирован фрейм с источником «http://localhost:8080” от доступа к фрейму перекрестного источника при перечислении фреймов на странице

Вы также можете использовать обратный прокси-сервер, чтобы обойти это ограничение.

...