Question

我创建了一个加载Iframe的Angular Material模态。在此iframe中，有一个表格。 我想在提交此表单后关闭模式，但是由于表单HTML是通过iframe URL创建的，因此我无法将操作附加到提交按钮上。

<h3 matDialogTitle>My Dialog</h3>
<mat-dialog-content>
  <iframe 
    width="800" 
    height="400"
    frameBorder="0"
    [src]=" url | saferesource">
  </iframe>
</mat-dialog-content>
<mat-dialog-actions>
  <!-- <button md-button matDialogClose>Close Dialog</button> -->
</mat-dialog-actions>

在生成的HTML表单中单击“提交”按钮后，如何关闭此模式？

谢谢

Answer 1

您可以在Window对象上使用postMessage方法。

更多信息在这里： https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

简短示例，在iframe中，您可以执行以下操作：

window.parent.postMessage('close', '*');

在托管iframe的应用程序中，请听以下消息：

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  if (event.data === 'close'){
      // close dialog
  }
}

请注意，这是伪代码，未经语法和实际功能检查。

从Angular中的iframe内部检测事件

1 个答案: