Question

以下js错误构成了我的问题的关键。

Uncaught TypeError: Cannot read property 'postMessage' of null
at n.saveField (thirdPartyStuff.js?v=Dev:formatted:297)
at n.handleEvent (thirdPartyStuff.js?v=Dev:formatted:305)
at r (thirdPartyStuff.js?v=Dev:formatted:343)

根据这个链接，我认为aurelia应该受到责备。

https://github.com/IdentityModel/oidc-client-js/issues/171

这是我正在使用的视图。

<template>
    <require from="cms-content-control"></require>

    <div show.bind="!model.partialCardDetails">
        <content-control 
            name-is-valid.bind="nameIsValid"
            card-is-valid.bind="cardIsValid"
            expiry-is-valid.bind="expiryIsValid"
            cvn-is-valid.bind="cvnIsValid"
            secure-field-callback.bind="secureFieldCallback()"
        ></content-control>
    </div>
</template>

这是控制对象。

import { bindable, noView, inject } from "aurelia-framework";
import "../thirdPartyStuff.js";

@noView
@inject(Element)
export class ContentControl {

    @bindable nameIsValid: boolean;
    @bindable cardIsValid: boolean;
    @bindable expiryIsValid: boolean;
    @bindable cvnIsValid: boolean;
    @bindable secureFieldCallback: (fieldIsValidCheck: (isValid: boolean) => { }) => () => {};

    constructor(private readonly element: Element) {
        let div = document.createElement("div");
        div.id = "secure-field-name";
        element.appendChild(div);
        div = document.createElement("div");
        div.id = "secure-field-card";
        element.appendChild(div);
        div = document.createElement("div");
        div.id = "secure-field-expiry";
        element.appendChild(div);
        div = document.createElement("div");
        div.id = "secure-field-cvn";
        element.appendChild(div);
    }

    attached() {
        this.thirdPartyStuff();
    }

    thirdPartyStuff() {
        // A third part script called that injects iframes into the divs injected.
    }

    detached() {
        while (this.element.firstChild)
            this.element.removeChild(this.element.firstChild);
    }
}

整个网站都坐在div级别

<body>
    <div aurelia-app="/app/main"></div>
</body>

我的问题是，如果加载视图然后导航并返回，我会在顶部获得帖子错误详细信息。从我读到的可能是因为aurelia正在搞乱iframe的内容，但我不确定。

有没有办法告诉aurelia完全忽略组件并且不进行绑定更改？

编辑1

请求更多关于第三方脚本中发生的事情的信息。

这是使用postMessage的地方。

secureField.prototype.saveField = function () {
    if (this.needsSave == true) {
        this.iframe.contentWindow.postMessage("save", "*");
        this.needsSave = false;
    }
};

这就是iframe的创建方式

secureField.prototype.createIFrame = function () {
    this.iframe = document.createElement("iframe");
    this.iframe.id = this.id;
    this.iframe.setAttribute("allowTransparency", "true");
    this.iframe.style.cssText = 'z-index: 9999; display: block; border: 0px none transparent; margin: 0px; padding: 0px; -webkit-tap-highlight-color: transparent; width: 100%; height: 100%; background: transparent;';
    this.div.appendChild(this.iframe);
    // now set the iFrme's URL
    this.iframe.src = this.sharedUrl();
    return this.iframe;
};

调用saveField的事件处理程序

secureField.prototype.handleEvent = function (event) {
    var ev = new fieldEvent(event);
    // call callback if a save for this field
    if (ev.targetField == this.fieldType && this.callbackFunc && !ev.valueHasFocus) {
        this.needsSave = !(ev.valueIsSaved);
        this.callbackFunc(ev);
    }
    // if a focus in and not for this field, force a save
    if (ev.valueHasFocus && ev.targetField != this.fieldType) {
        this.saveField();
    }
    // flag dirty if this field received focus
    if (ev.valueHasFocus && ev.targetField == this.fieldType) {
        this.needsSave = true;
    }
};

Aurelia正在搞乱注入的iframe

0 个答案: