使用 Angular 4 获取 iframe 表单值答案

【问题标题】：get iframe form values using angular 4使用 Angular 4 获取 iframe 表单值
【发布时间】：2017-11-30 13:35:55
【问题描述】：

我有来自另一台主机 localhost:9000 的简单表单和我当前从 localhost:4200 运行的 Angular 应用程序

如何使用 angular 4 获取 iframe 表单字段值。

我在下面试过这个：

来自 localhost:9000 的表单

<html>
...
<body>
<div class="container" id="registerForm">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-4 control-label" style="text-align: left;">First Name </label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="first_name" id="first_name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label" style="text-align: left;">Last Name </label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="last_name" id="last_name">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

在下面的角度应用代码中：

app.component.html

<iframe width="100%" #myFrame height="auto" [src]="url | safe"></iframe>
<button class="btn btn-primary" (click)="save()">Save</button>

app.component.ts

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

export class HomeComponent {

    @ViewChild('myFrame') iframe: ElementRef;

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

    save() {
        <-- i want iframe form values here after click save button -->
        let doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow;
        console.log(doc);
    }
}

谁能帮帮我

【问题讨论】：

你解决了吗？ @钱德鲁

标签： angular typescript iframe

【解决方案1】：

iframe 组件

 window.parent.postMessage(form.value,'*')

*作为域 example.com 或使用 *

在父组件中

window.addEventListener("message", formData);

【讨论】：