2011-02-17 5 views
0

iFrame을 통해 양식을 게시하려고 할 때이 오류가 발생합니다. IE 8에서는 FF와 Opera에서 잘 작동합니다."웹 페이지 탐색이 취소되었습니다."IE 8에 게시 할 때

짧은 버전의 문제는 : 복잡한 json 객체로 변환하기 위해 JavaScript를 사용하는 복잡한 양식이 있습니다. 그런 다음 json 문자열로 변환합니다. json 문자열에 대한 숨겨진 필드가있는 페이지에 양식을 추가하고 파일의 복제를 제어하고 해당 양식을 내 iframe의 대상으로 제출합니다. 내가 asp.net의 MVC를 사용하고

<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> 

:

여기 내 테스트 코드입니다. 내가 http와 https를 섞는 것에 대해 말한 페이지를 보았을 때 대답을 찾고 있었지만, 나는 그것을 로컬 호스트에서 실행 중이다. http://localhost:60819/Temp/Testing/ 및 '<% = Url.Action (MVC.Temp.Actions.TestingFormSubmitThroughIFrame) %>'= '/ 온도/TestingFormSubmitThroughIFrame "

편집 : 테스트 페이지의 주소이며 조치를 변경 "/ Temp/TestingFormSubmitThroughIFrame"대신 전체 주소로 수정하면 해결되지 않았습니다.

도움 주셔서 감사합니다.

편집 : 죄송합니다. 전체 오류 메시지가 복사 된 것 같습니다. 전체 오류 메시지는 다음과 같습니다

"웹 페이지에 대한 탐색이 취소되었습니다"

"당신이 시도 할 수있는 일 : 이 주소를 다시 입력

."이 제출하려고 할 때 내 iframe에 등장

. 그것은 심지어 게시물을 만들려고하지 않습니다.

+0

질문의 마지막 부분은 매우 혼란 스럽습니다. 정확하게 오류는 무엇입니까, 언제 발생합니까? – Pointy

+0

죄송합니다. 복사/붙여 넣기뿐만 아니라 내가 비록 작동하지 않았다. 전체 메시지를 추가했습니다 (별로 없습니다). – Patricia

답변

-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> 

는 희망 즉, 미래에 누군가를 도와줍니다.

관련 문제