Обновить

проблема не в iframe, проблема в том, что форма не отправляется функцией onsubmit, которая отправляет json. Цель состоит в том, чтобы динамически создавать iframe, который перенаправляет с помощью form post на другой URL с json-содержимым тега script выше.

Оригинал

У меня есть следующее на примере веб-сайта:

 <script data-dashboard="true" type="application/json">
    {
    "title":"Serverless Identity"
    }
</script>
<script type="text/javascript">
    let dashboardConfiguration = document.querySelector("script[data-dashboard="true"]");
    if (dashboardConfiguration) {
        let iframe = document.createElement("iframe");
        let model = JSON.stringify(JSON.parse(dashboardConfiguration.innerHTML.trim()));
    
        document.body.appendChild(iframe);

        var doc = iframe.contentWindow.document;
        doc.open()
        doc.writeln(`<form id="form" action="https://localhost:44338/dashboard/" method="POST" target="_self"></form>`)
        doc.close();


        iframe.onload = () => {
           

            let form = doc.getElementById("form");
             
            form.addEventListener("submit", (e) => {
                console.log(model);
                e.preventDefault();
                // construct an HTTP request
                var xhr = new XMLHttpRequest();
                xhr.open(form.method, form.action, true);
                xhr.setRequestHeader('content-type', 'application/json; charset=UTF-8');
                 
                // send the collected data as JSON
                xhr.send(model);

                xhr.onloadend = function () {
                    // done
                };
            });
            form.submit();


        }
    };

</script>
  

Я также пробовал с onsubmit с тем же результатом, что и при обычной отправке.

Это невозможно,

при использовании form.submit() любые обработчики onsubmit не будут запускаться, согласно спецификации.

Я использовал другой подход к отправке обычной формы отправки с использованием значений в кодировке формы с полезной нагрузкой hole в одном скрытом поле и десериализовал ее на стороне сервера.

Когда вы создали iframe, затем он загружен, а затем вы привязываете onload, вместо этого вы должны использовать DOMNodeInserted событие в теле, когда iframe добавляется к телу, например

 let iframe = document.createElement("iframe");
        let model = JSON.stringify(JSON.parse(dashboardConfiguration.innerHTML.trim()));
document.body.addEventListener("DOMNodeInserted", function (ev) {
//write your logic here
});
        document.body.appendChild(iframe);

        var doc = iframe.contentWindow.document;
  

Удалить iframe.onload = () => { } . Проверьте вкладку Chrome network . Запускается URL формы https://localhost:44338/dashboard/ .

 <script data-dashboard="true" type="application/json">
    {
    "title":"Serverless Identity"
    }
</script>
<script type="text/javascript">
    let dashboardConfiguration = document.querySelector("script[data-dashboard="true"]");
    if (dashboardConfiguration) {
        let iframe = document.createElement("iframe");
        let model = JSON.stringify(JSON.parse(dashboardConfiguration.innerHTML.trim()));

        document.body.appendChild(iframe);

        var doc = iframe.contentWindow.document;
        doc.open()
        doc.writeln(`<form id="form" action="https://localhost:44338/dashboard/" method="POST" target="_self"></form>`)
        doc.close();

        let form = doc.getElementById("form");

        form.addEventListener("submit", (e) => {
            console.log(model);
            e.preventDefault();
            // construct an HTTP request
            var xhr = new XMLHttpRequest();
            xhr.open(form.method, form.action, true);
            xhr.setRequestHeader('content-type', 'application/json; charset=UTF-8');

            // send the collected data as JSON
            xhr.send(model);

            xhr.onloadend = function () {
                // done
            };
        });
        form.submit();
    }