使用Angular 4获取iframe表格值

我从另一个主机localhost:9000中有简单的表单，而我当前的角度应用程序运行了localhost:4200

如何使用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>

在下面的Angular App代码中：

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);
    }
}

任何人都可以帮助我

iframe component

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

*作为domain example.com或使用 *

在父部件中

window.addEventListener("message", formData);

相关内容

最新更新

热门标签：