使用Post方法的表单提交不适用于PWA中的目标_blank

时间:2019-01-18 09:32:04

标签: reactjs forms google-chrome single-page-application progressive-web-apps

<form
      action="some url"
      method="POST"
      target="_blank"
>
    {_.map(somedata, (value, key: string) => (
     <input name={key} key={key} type="hidden" value={value}/>
      ))}
</form>

我正在使用一个页面,该页面单击某些按钮即可提交表单,这会发布一些数据并在新选项卡中打开一个页面。当我使用Add to Home Screen功能创建PWA快捷方式并从内部提交表单时,此方法在chrome mobile android系统中运行良好,但不起作用(新的url在新标签页中打开,但不显示表单发布的数据)它。此外,新标签仅在PWA中打开,而不是在移动Android chrome中打开。

1 个答案:

答案 0 :(得分:0)

我很抱歉这与Jquery有关(它的核心是使用核心JS),但是我认为这类似于解决表单发布问题。它使用JS FormData对象,该对象也允许文件。

function formPost(form){
    var formData = new FormData();

    $(form).find('input,select,textarea').each(function(){
        if ($(this).attr('type') == 'file'){
            use = $(this).get(0).files[0];
        } else {
            use = $(this).val();
        }

        formData.append($(this).attr('name'),use);
    })

    var request = new XMLHttpRequest();
    request.open('POST',$(form).attr('action'));
    request.send(formData);
}

值得一提的是,对于浏览器,这至少需要IE10,但我认为在2019年底,我们不必为此担心! https://caniuse.com/#search=formdata(PWA在“现代浏览器”中运行)。