将表单数据提交到iframe的Angular方式

时间:2016-06-17 16:49:03

标签: angularjs forms iframe

我有html如下

<form name="aForm" show="true" action="iframeUrl" target="iFrame" method="post">
  <input id="input_data" type="text" name="input_data" value="data" />
  <input id="input" type="submit" value="post">
</form>

<iframe id="iFrame" name="iFrame" src="iframeUrl" height="500" width="400" border=0>
  <p>Your browser does not support iframes.</p>
</iframe>

我已经拥有了我想要在加载页面时提交给iframe的数据。我想要做的是让我的角度控制器在加载页面后立即将表单提交给目标iframe。 单击我创建的提交类型输入为我提供了我在iFrame中寻找的结果,但我不希望用户必须这样做,或者甚至让表单对用户可见。 我已经看过很多纯粹的javascript解决方案,但它们看起来并不像他们真正的角度方式一样。有关最佳实践的建议以及如何以角度进行此操作?我是框架的新手,所以解释也会受到赞赏。

2 个答案:

答案 0 :(得分:0)

我不知道这是否是一个理想的解决方案,但我发现这样的东西有效。

window.iframeLoad = function(){
            if (! _this.submitted) {
                document.getElementById('aForm').submit();
            }
            _this.submitted = true;
        };

然后制作iframe

<iframe id="iFrame" name="iFrame" src="iframeUrl" height="500" width="400" border=0 onload="iframeLoad()">
  <p>Your browser does not support iframes.</p>
</iframe>

我仍然有兴趣听取有关此解决方案或更好解决方案的其他想法。

答案 1 :(得分:0)

这适用于Angular 2              

    <form target="frame" action="<Your URL to POST>" #form method="POST" hidden="hidden">
        <input name="token" value={{token}}>
    </form>

从组件中的nginint()调用nativeElement.submit()。