Question

我有来自其他主机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>

在下面的角应用代码中：

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

任何人都可以帮助我

Answer 1

iframe组件

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

*作为域example.com或使用*

父组件中的

window.addEventListener("message", formData);

使用角度4

1 个答案: