dataTables表单将无法在Internet Explorer中正确提交

Question

TL; DR - 一切运行良好，除了最后刷新购物车iframe。甚至window.location.reload(true);，我认为强制重新加载整个页面，不起作用，但击中F5将。

我的问题最终源于this question提出的同样问题。 DataTables需要有效的HTML，因此<form>必须是<td>的孩子。我正在尝试找到一个javascript解决方案，因此每行上的表单将在IE和较旧的Edge中工作，不支持form attribute用于<form>标记之外的输入，如dataTables的这个代表性行所示（它通常显示为25一次）：

<table>
    <tr>
        <td></td>
        <td>
            <form id="101110" name="form" method="post" action="Cart.cfm" target="cart_frame">
                <input name="ItemID" type="hidden" id="ItemID" value="101110">
                <input title="Click to add to cart" name="Submit" type="submit" class="buttons" value="101110">
                <input name="Qty" type="hidden" value="">
                <input name="Brand" type="hidden" value="">
                <input name="Pack" type="hidden" value="113">
                <input name="UOM" type="hidden" value="CS">
            </form>
        </td>
        <td><input form="101110" title="Type number and ENTER to add to cart" name="Qty" type="text" id="Qty" value="" size="1" maxlength="4"></td>
        <td><input form="101110" name="Broken" type="checkbox" id="Broken"></td>
        <td>MY AWESOME WIDGET #115</td>
        <td></td>
        <td>115</td>
        <td>48.50</td>
        <td>&nbsp;</td>
        <td>0.52</td>
    </tr>
</table>

我想出了一个丑陋的javascript解决方案来拦截提交，找到其他2个输入并根据需要添加他们的数据，提交XMLHttpRequest并重新加载页面。然而，即使正确的responseText回来并发送到cart_frame，框架显示空白，直到我击中F5。这是我的来源：

    document.addEventListener('submit', function(e) {
        // disable the normal form submit handler
        e.preventDefault();
        // store reference to form
        const form = e.target;
        var XHR = new XMLHttpRequest();
        var urlEncodedData = "";
        var urlEncodedDataPairs = [];

        // convert form elements into an array of URL-encoded key/value pairs.
        for (var i = 0, element; element = form.elements[i++];) {
            urlEncodedDataPairs.push(encodeURIComponent(element.name) + '=' + encodeURIComponent(element.value));
        };
    /*
    *** FIND THE QTY AND BROKEN INPUTS AND ADD TO ABOVE ARRAY
    *** IF TABLE STRUCTURE CHANGES IT WILL BREAK THIS!!!
    */
        // get the NEXT td element of the form's parent node
        var tdSib1 = form.parentNode.nextElementSibling;
        // get child element (Qty)
        var input1 = tdSib1.firstElementChild;
        urlEncodedDataPairs.push(encodeURIComponent(input1.name) + '=' + encodeURIComponent(input1.value));
        // get the child of the NEXT td (Broken)
        var input2 = tdSib1.nextElementSibling.firstElementChild;
        //console.log(input2.name  + '=' + input2.checked);
        if (input2.checked) {
            urlEncodedDataPairs.push(encodeURIComponent(input2.name) + '=on');
        }
        // convert array into a single string and replace all %-encoded spaces to 
        // the '+' character; matches the behaviour of browser form submissions.
        urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
        console.log(urlEncodedData);

        XHR.addEventListener('load', function(event) {
            // success
            if (XHR.readyState === XHR.DONE) {
                if (XHR.status === 200) {
                    var destframe = parent.document.getElementsByName('cart_frame')[0];
                    destframe.src = XHR.responseText;
                    //console.log(XHR.responseText);
                    //destframe.contentWindow.location.reload(true); //did not work either
                    // what do I need to get cart to refresh properly???
                    window.location.reload(true);
                }
            }
        });

        XHR.addEventListener('error', function(event) {
            alert('Oops! Something went wrong.');
        });

        // Set up our request
        XHR.open('POST', form.action);

        // Add the required HTTP header for form data POST requests
        XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        XHR.send(urlEncodedData);
    });

如何强制真正刷新购物车iframe，以便显示更新的responseText？如果由于某种原因这很重要，那么iframe在购物车在后台更新时就处于隐藏的<div>中，只是在主页上的按钮上显示更新的项目数量，这些更改了哪些div被显示和隐藏以显示购物车准备结账时。

或者，有没有更好的方法来完成在IE中的单行dataTables上提交表单？我知道我不能改变表格/表格HTML结构，它必须在IE 11中得到支持。我将把我的源码移动到它自己的函数中，这样它也可以在Qty input元素中点击Enter时运行。

Answer 1

事实证明我在DOM上的距离不够远。更改

window.location.reload(true);

至

window.top.location.reload();

是重新加载整个页面所需的一切。 ：/

或者，这也可以工作而无需重新加载所有内容，因此这是我选择做的。

destframe.src="cart.cfm";