“取消导航到网页” IE 8. 将表单发布到 IFrame 时

Question

我在尝试通过 iFrame 发布表单时遇到此错误。在 IE 8 中。在 FF 和 Opera 中运行良好。

问题的简短版本是：我有一个复杂的表单，我使用 JavaScript 将其转换为复杂的 json 对象，然后将其转换为 json 字符串。我在页面中添加了一个表单，其中包含 json 字符串的隐藏字段，并克隆了文件控件并提交了带有 iframe 目标的表单。

这是我的测试代码：

    <div id="testingFormHolder">
<form id="IFrameSubmitForm">
    <input type="text" id='testText' name='testText' />
    <input type="file" id='testFile23' name='testFile' cfid="23" />
    <input type="file" id='testFile24' name='testFile' cfid="24" />
    <input type="button" id='testSubmit' name='testSubmit' />
</form>

</div>

<div id="TempFormHolder">

</div>
<div id="IFrameHolder" class="">

</div>

<script type="text/javascript">
    $(function () {
        $('#testSubmit').click(function () {
            var fileControls = $('#testingFormHolder').find('input[type=file]');
            var otherDataObject = { "field1": 'blah blah field 1', "field2": "field2" };
            var iframe = $('<iframe name="theIFrame" id="theIFrame" class="" src="about:none" />');
            var theFileNames = new Array();
            var thefiles = $('#testingFormHolder').find('input[type=file]');
            thefiles.each(function () {
                theFileNames.push({ cfid: $(this).attr('cfid'), FileName: $(this).val() });
            });

            otherDataObject.fileNames = theFileNames;
            var otherData = JSON.stringify(otherDataObject);

            $('#IFrameHolder').empty().append(iframe);

            var theForm = $('<form id="TempForm" name="TempForm">');
            fileControls.each(function () {
                theForm.append($(this).clone().attr('name', 'files').attr('id', $(this).attr('customFieldId')));
            });
            // theForm.append(fileControl.clone().attr('name', 'files').attr('id', 'file1'));
            theForm.append($("<input type='text' id='model' name='model' value='" + otherData + "' />"));

            theForm.attr('action', '<%= Url.Action(MVC.Temp.Actions.TestingFormSubmitThroughIFrame)%>');
            theForm.attr('method', 'POST');
            theForm.attr('enctype', 'multipart/form-data');
            theForm.attr('encoding', 'multipart/form-data');
            theForm.attr('target', 'theIFrame');
            $('#TempFormHolder').empty().append(theForm);

            theForm.submit();
           // $('#theIFrame').load(function () {


           // });

            return false;

        });

    });

</script>

我正在使用 asp.net mvc。当我在寻找答案时，我遇到了一个关于混合 http 和 https 的页面，但我只是在本地主机上运行它。测试页地址为： http://localhost:60819/Temp/Testing/ 和 '' = "/Temp/TestingFormSubmitThroughIFrame"

编辑：将操作更改为完整地址而不是“/Temp/TestingFormSubmitThroughIFrame”并没有解决它。

感谢您的帮助！

编辑：很抱歉，我认为它复制了整个错误消息！完整的错误信息是：

“网页导航已取消” “你可以尝试什么： 重新输入地址。

"

当它尝试提交时出现在我的 iframe 中。它甚至没有尝试发帖。

Answer 1

嗯，我改用 jquery.form 插件，它似乎工作！我不确定它有什么不同。但我会向任何人推荐它，它非常易于使用！我不知道为什么我一开始没有使用它！

现在的代码如下所示：

<script type="text/javascript">

        $(function () {
            $('#testSubmit').click(function () {
                var fileControls = $('#testingFormHolder').find('input[type=file]');
                var otherDataObject = { "field1": 'blah blah field 1', "field2": "field2" };

                var theFileNames = new Array();

                fileControls.each(function () {
                    theFileNames.push({ CustomFieldId: $(this).attr('customFieldId'), FileName: $(this).val() });
                });

                otherDataObject.cfNames= theFileNames;
                var otherData = JSON.stringify(otherDataObject);
                $('#TempFormHolder').empty();
                var theForm = $('<form id="TempForm" name="TempForm" action="http://localhost:60819/Temp/TestingFormSubmitThroughIFrame" />').appendTo('#TempFormHolder');
                fileControls.each(function () {
                    theForm.append($(this).clone().attr('name', 'files'));
                });


                theForm.append($("<input type='text' id='model' name='model' value='" + otherData + "' />"));

                theForm.ajaxSubmit({ target: '#ResultTarget' });

                return false;

            });

        });

    </script>

希望这对将来的人有所帮助。