알리페이 결제 백엔드에서 되돌아오는 html 코드를 어떻게 처리합니까

알리페이가 금액을 입력하면 aax 요청을 보내고 백엔드에서 html 코드를 되돌려줍니다. 다음과 같습니다.

    

document.forms['alipaysubmit'].submit();

다음 방식을 이용하여 먼저 백엔드에서 되돌아오는 html 코드를 현재 페이지에 삽입한 다음에 표를 제출하여 현재 페이지에서 알리페이 결제 페이지로 바로 이동할 수 있다.

        const div = document.createElement('div');
        div.innerHTML = res.data; // html code
        document.body.appendChild(div);
        document.forms.alipaysubmit.submit();

단, 상기 방식은 본 페이지에서 바로 이동할 것입니다. 제가 원하는 것은 새로운 탭에서 알리페이 결제 페이지를 여는 것입니다.설정 양식target="_blank"이 새 탭에서 양식을 제출할 수 있음을 알았으므로 수정 코드는 다음과 같습니다.

        const div = document.createElement('div');
        div.innerHTML = res.data; // html code
        document.body.appendChild(div);
        document.forms.alipaysubmit.setAttribute('target', '_blank');
        document.forms.alipaysubmit.submit();

이렇게 하면 확실히 새 탭에서 결제 페이지를 열 수 있지만, 크롬 브라우저는 이를 탄창으로 차단하기 때문에 이런 방법은 통하지 않는다.비동기를 동기화async: false로 바꾸어 차단을 피할 수 있다.그러나 일부 aax 라이브러리는 동기화로 수정할 수 없습니다.그래서 winow를 사용하기로 했어요.오픈해서 새 창을 엽니다.
window.오픈 방법은 새로운 브라우저 창을 열 수 있습니다.

var btn = $('#btn');
btn.click(function () {
    //     
    window.open('http://www.baidu.com')
});

위 윈도우와 같습니다.오픈은 사용자가 터치할 때 차단되지 않고 새 창을 정상적으로 열 수 있기 때문에 사용자가 자발적으로 터치할 때 브라우저가 차단하지 않습니다.

var btn = $('#btn');
btn.click(function () {
    $.ajax({
        url: 'ooxx',
        success: function (url) {
            //    
            window.open(url);
        }
    })
});

위 사용자가 윈도우를 직접 터치하지 않았다면.open, 대신 aax 요청, window.open 방법은 aax의 리셋 함수에 놓여 있으며, 이러한 상황은 차단됩니다

브라우저가 사용자 작업이 아닌 새 팝업 창을 감지하면 이를 차단합니다.브라우저가 사용자가 원하는 페이지가 아니라고 생각하기 때문

크롬의 안전 메커니즘에서 사용자가 터치하지 않은 window.오픈 방법은 차단됩니다.

탄창이 차단된 문제를 어떻게 해결하는지, 먼저 차단되지 않은 빈 창을 열고, 다른 요청을 한 후에 href를 바꿀 수 있습니다.다음과 같습니다.

    var btn = $('#btn');
    btn.click(function () {
        //            
        var newWindow = window.open();
        $.ajax({
            url: 'ooxx',
            success: function (url) {
                //      url
                newWindow.location.href = url;
            }
        })
    });

그러나 백엔드가 우리에게 되돌아오는 것은 url 링크가 아니라 html의form표이기 때문에 우리는 상기 두 가지 방법을 결합하여 먼저 빈 창을 열고 이 빈 창에서 표를 제출할 수 있다.
최종 솔루션:

        const newTab = window.open();
        axios(...)
            .then(res=>{
                const div = document.createElement('div');
                div.innerHTML = res.data; // html code
                newTab.document.body.appendChild(div);
                newTab.document.forms.alipaysubmit.submit();
            })