角度4设置值以形成iframe的输入字段

Question

我在angular 4应用程序中将iframe与其他域一起使用，并希望在iframe表单输入字段中分配值。

有什么方法可以实现这一目标？

谢谢。

Answer 1

我以前遇到过类似的问题：我认为在这种情况下，您需要做两件事：

• 在两个应用程序（嵌入应用程序和iframe应用程序）之间实现消息传递层
• 扩展两个应用程序的代码（以便iframe可以处理通过浏览器发送给它的消息）

如果应用程序位于其他域中，则由于Same-origin policy.

，它们无法直接进行交互

要实现此目的，您必须使用window.postMessage()。

基本思路：

1. 嵌入应用程序启动，iframe应用程序启动

2. iframe应用程序通过window.addEventListener("message", receiveMessage, false);

订阅邮件

3. 嵌入应用程序通过@ViewChild('iframeRef') iframeRef: ElementRef;之类的消息发送经过iframe的邮件 this.iframeRef.nativeElement.contentWindow.postMessage({some message object to the iframe}, '*', []);

   1. iframe应用处理消息

注意：出于安全考虑，您可能要检查消息事件的来源，并且仅处理您信任的来源发送的消息。

 function receiveMessage(event){
    console.log("Received a message From: Angular", event);

    // if (event.origin !== "http://example.org:8080")
    // return;
    // todo: this is crucial for being secure!

    ....
  }