属性“contentWindow”在 HTMLElement 类型上不存在 - 从一台服务器发送到另一台服务器

Question

目标/背景：我需要将一个变量的值从我的 Angular 应用程序发送到页面上 iFrame 内的 ChatServer（aspx 和 javascript）。它在不同的服务器上。

我尝试过的：我正在遵循以下解决方法：https : //stackoverflow.com/a/25098153/11187561

但是，我收到错误消息：HTMLElement 类型上不存在属性“contentWindow”

我接下来还尝试了什么：通过 SO，我发现/sf/answers/2692052051/

我将它放在 ngAfterViewInit 中，但仍然出现错误。

代码：

ngAfterViewInit() {
    var frame = document.getElementById('your-frame-id');
    frame.contentWindow.postMessage(/*any variable or object here*/, '*'); 
}

Answer 1

如果您从 Typescript 类型验证中收到该信息，您可以明确告诉编译器您想要执行的类型，如下所示：

var iframe = (document?.querySelector('#myIframe') as HTMLIFrameElement) 

Answer 2

问题是getElementById返回一个HTMLElementnot an HtmlIFrameElement。你可以做的是定义一个类型警卫检查frame是IFRAME。第二个问题是它contentWindow可以为空，所以我们也必须检查它。

const isIFrame = (input: HTMLElement | null): input is HTMLIFrameElement =>
    input !== null && input.tagName === 'IFRAME';

function ngAfterViewInit() {
    let frame = document.getElementById('your-frame-id');
    if (isIFrame(frame) && frame.contentWindow) {
        frame.contentWindow.postMessage({}, '*');
    }
}

Answer 3

HTMLI框架元素

只需提及类型

const docs = (document?.getElementById('pdfDocument') as HTMLIFrameElement);