发布 Raw HTML 的问题，相同的代码在其他框架中工作

Question

我在旧框架中有一些 JS 动态地 posts 表单数据到后端，然后后端将 posted HTML 转换为 PDF 文档，可以内联显示或下载。这些基本上是按钮，在 data-content 属性中有元素 id 包装内容（HTML 以转换为 PDF）。 data-css 只是任何自定义的简称 css，data-filename 是名称，data-disposition 是附件或下载等

$("body").on("click", ".wkdownload", function(e) {

        dynamicPostForm ('/Utilities/getPDFfromBody', {markup: $($(this).data("content"))[0].outerHTML, extra: $(this).data("css"), filename:  $(this).data("filename"), disposition: "attachment"}, false);

});

$("body").on("click", ".wknewtab", function(e) {

        dynamicPostForm ('/Utilities/getPDFfromBody', {markup: $($(this).data("content"))[0].outerHTML, extra: $(this).data("css"), filename:  $(this).data("filename"), disposition: "inline"}, true);
});

还有另一个函数可以在 posting 之后动态创建、提交和销毁表单：

function dynamicPostForm (path, params, target) {

    method = "post";
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    if (target) {
        form.setAttribute("target", "_blank");
    }
    for(var key in params) {

        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);
            form.appendChild(hiddenField);
         }
    }

    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", "_token");
    hiddenField.setAttribute("value", '{{ csrf_token() }}');
    form.appendChild(hiddenField);
    document.body.appendChild(form);
    form.submit();
    $(form).remove();
}

这一切似乎在旧框架中都有效，但在新框架中存在“标记”输入字段因某种原因被截断的问题。我以为它可能在后端，但根据我在控制台中登录的内容，它似乎在客户端。

在新框架中，属性为：

<input type="hidden" name="markup" value="<div id=">

而在旧框架中是：

<input type="hidden" name="markup" value="<div id=\"reportnoheader . . . al message.</div></div>"

但是两者的代码基本相同。并不是说 " 在第一个实例中没有转义，而在第二个实例中它被转义了。

当我检查控制台中的 post 时，我看到了相同的内容，旧的：

标记为：

<div+id="reportnoheader"> . . . .</div>"

在新的：

"<div+id=" (truncated).

不确定为什么会这样，因为代码几乎完全相同。我可以尝试转义或编码，但它在旧框架中工作正常。

Answer 1

可能是在回答我自己的问题，但简单地使用 .value = value 而不是 setAttributute("value", params[key]) 似乎可以解决我的问题：

for (const [key, value] of Object.entries(params)) {

    if(params.hasOwnProperty(key)) {
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", key);
        hiddenField.value = value;
        form.appendChild(hiddenField);
     }
}

发布 Raw HTML 的问题，相同的代码在其他框架中工作

Issue with Posting Raw HTML, same code works in other framework

javascript

forms

jquery

encoding