iframe发送post请求

Posted 2020-12-20 sincere-ye

昨天踩了个坑，本来一个简单的页面能够很快上线的，结果半天没搞好。

需求是使用iframe，然后发送一个post请求去获得响应页面。平时使用iframe时，设定的src属性是get请求方式。

一般有两种方式：

1. ajax使用post请求返回页面，直接将返回的页面数据放入iframe标签中
2. 结合form表单，利用form表单的post请求方式达到目的，我采用了这种方法

我参考html中iframe请求设定为post方式，采用了增加一个form表单的标签，method设置为post，target设置与iframe的name属性相同。

html代码

<form
        id="ttsForm" target="iframe" method="post" action="url" >
</form>
<iframe name="iframe" frameborder="0" class="layadmin-iframe"></iframe>

js代码

$(‘#ttsForm‘).attr(‘action‘, ‘url‘);
$(‘#ttsForm‘).submit();

以上方式在第一次刷新页面时，的确是发送了post请求，获得了正确的响应。当在第二次点击到这个iframe页面的时候，却发现不发送post请求，只有手动重新刷一次页面才会发送请求。

在查找多种解决方案后， 参考了Stack Overflow上的一个回答，采用下面的方法终于解决了这个iframe的post请求问题，以下方法使得每次在切换到这个iframe中时都会发送post请求。

<form
        id="ttsForm" target="iframe" method="post" action="url" >
</form>
<iframe name="iframe" frameborder="0" class="layadmin-iframe"></iframe>

<script type="text/javascript">
    document.getElementById(‘ttsForm‘).submit();
</script>

本文参考:
[1] html中iframe请求设定为post方式
[2] Sending data through post method to an iframe