如何使用 Angular 4 从 iframe 调用组件函数答案

【问题标题】：How to call component function from iframe using angular 4如何使用 Angular 4 从 iframe 调用组件函数
【发布时间】：2017-12-05 14:04:44
【问题描述】：

我用于在 angular4 应用程序中显示 iframe，即在 localhost:4201 中。 iframe 页面来自 localhost:9000。在我的 iframe 页面中有一个按钮。如果我单击按钮，需要执行我的 angular4 组件功能。我试过这个，但它会抛出错误

localhost:9000 - index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>sampleMyHtmlApp</title>
</head>
<body>
    <div style="padding: 20px 0px;">
        <div class="container">
            <form class="form-horizontal">
                <div class="form-group">
                    <label class="control-label col-xs-2">Account Number</label>
                    <div class="col-xs-10">
                        <input type="text" class="form-control" id="inputAccountNo" placeholder="Account number">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-offset-2 col-xs-10">
                        <button type="submit" class="btn btn-primary" onClick='parent.SampleFunction()'>Action</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

本地主机：4201

app.component.html

<iframe width="100%" [src]="url | safe" style="height: 302px; border: none;"></iframe>

app.component.ts

import { Component, Input } from '@angular/core';

@Component({
     ....
})

export class appComponent {

    private url: string = "http://localhost:9000";

    constructor() {
        (<any>window).SampleFunction = this.SampleFunction.bind(this);
    }


    SampleFunction() {
        console.log('SampleFunction');
    }

}

当我点击它时，它会显示如下错误：

【问题讨论】：

你试过postMessage吗？
@yurzui 我从来没有试过那个。我不知道如何使用它
除了@yurzui 回答：您可以在主窗口和Iframe 窗口之间发送消息。因此，将消息发布到主窗口和消息调用所需的过程。这是一个小例子：robertnyman.com/html5/postMessage/postMessage.html
@Chandru 你解决了吗？
@Manoj 是的！我解决了它并发布了我的答案。

标签： angular iframe

【解决方案1】：

是的！我确实解决了使用 angular-4 和 iframe 发送或接收数据的问题。

示例：-

app.component.html

<iframe width="100%" frameBorder="0" [src]="url | safe" style="height: 500px; border: none;" (load)="onLoad()" #TheIframe></iframe>

app.component.ts

import { Component, HostListener, ViewChild } from '@angular/core';

export class AppComponent {
    @ViewChild('TheIframe') TheIframeEl: any;

    constructor() {
        (<any>window).reciveDataFromIframe = this.reciveDataFromIframe.bind(this);
    }

    onLoad() {
        const object = {
            'message': "Hello World!"
        };
        this.TheIframeEl.nativeElement.contentWindow.postMessage(object, 'http://localhost:3001');
    }

    @HostListener("window:message", ["$event"])
    reciveDataFromIframe(event: MessageEvent) {
        this.load(event.data);
    }

    load(data) {
        console.log('data', data);
    }
}

Reference send and receive data using iframe

【讨论】：