Question

我有一个问题似乎无法确定。情况就是这样。我有一个angular 5应用程序，在我的一个组件中，我必须将iframe放入另一个站点。 iframe用于信用卡处理及其工作原理是获取编码网址然后将该网址用于iframe，iframe是一个输入字段。当您在输入字段中输入信用卡号码时，iframed页面会向父母发送一条消息，其中包含稍后用于处理付款的编码值。

我遇到的问题是，当我从iframed页面收到消息后，我的应用程序会重定向到登录页面，而我似乎无法找到导致此问题的原因。

以下是涉及的代码：

模板：

<iframe sandbox="allow-scripts" id="cc-iframe" [src]="ccUrl"></iframe>

控制器：

this.paymentsService.getTokenizedField(this.paymentId).subscribe(response => {
    console.log('cc return url');
    console.log(response.url);
    this.ccUrl = this.sanitizer.bypassSecurityTrustResourceUrl(response.url);
    this.ccUrlReady = true;

    window.addEventListener('message', (e) => {
        e.preventDefault();
        e.stopPropagation();
        let token = JSON.parse(e.data);
        console.log('HERES YOUR TOKEN: ', token);
    }, {capture: true, once: true});
});

显然我的应用程序中还有其余的所有代码，但我无法在此发布所有代码。我相信这个问题的解决方案是捕获事件并阻止它冒泡或执行默认操作，但到目前为止我的努力还没有奏效。

我不知道可能导致此行为的其他机制。

有什么想法吗？

Answer 1

我弄明白发生了什么。

原来在代码中的其他地方有一个：

window.onmessage = function(e) {
    //irrelevant code
    window.location.href = '/login/index';
    //more irrelevant code
}

我无法找到它，因为我只是在代码库中搜索＆＃34; addEventListener＆＃34;我认为这是从iframe收听消息的唯一方法。

如何隔离iframed消息，使他们不传播

1 个答案: