2013-01-03 2 views
0

나는 바이올린 유무 :전화 알림 기능 IFRAME과 동일 기원 정책

http://jsfiddle.net/nicorellius/4vQ9S/

경고 화재 쇼 시작에를 이상과 가까운 보여 주지만, 버튼 클릭에 결합하는 것은 나를 도망 간다.

작동하는 fancybox 팝업이 있습니다.

<form id="my-form" method="post" action=""> 
    <table> 
     <tr> 
      <td> 
       <label for="name">Name</label></td> 
       <input type="text" id="name" name="name"> 
      </td> 
      <td> 
       <input type="submit" value="Submit"> 
      </td> 
     </tr> 
    </table> 
</form> 

링크 fancybox 트리거 :

$(document).ready(function() { 

    function before_show() { 
     alert("fancybox before show"); 
    } 

    function after_show() { 
     alert("fancybox after show"); 
    } 

    function on_close() { 
     alert("fancybox after close"); 
    } 

    function alert_me() { 
     $.fancybox.inner.find('iframe').contents().find('input.click-me').click(function() { 
      alert("fancybox has been foiled!!!"); 
     }); 
    } 

    $(".fancy-popup").fancybox({ 
     openSpeed  : 'slow', 
     openEffect : 'fade', 
     minWidth  : '200', 
     minHeight  : '100', 
     maxWidth  : '400', 
     maxHeight  : '150', 
     scrolling  : 'no', 
     beforeShow : before_show, 
     afterShow  : after_show, 
     afterClose : on_close, 
     //afterShow  : alert_me 
    }); 
}); 
:

<a class="fancy-popup" href="test.html" data-fancybox-type="iframe"> 

내가 어떤 함수를 호출하는 간단한 스크립트가

html로 간단한 테이블 : 그것은 양식의

원산지 정책이 동일하기 때문에 iFrame에서이 작업을 수행 할 수 없다는 것을 알고 있습니다. 나는이 일을 어떻게 할 수 있는지 내 삶에 대해 알 수 없다.

참고

문제는 설립 이후 변경된 때문에 검증을 참조하여 아래의 대답은 적용되지 않습니다주의하시기 바랍니다.

+1

경고를 추가하고 AJAX도 사용할 수 있습니다. 'XHR '당신은 fancybox에서 iframe을 사용할 수도 있습니다 (권장하지는 않지만 할 수 있습니다). jquery에서 많은 폼 검증 자 플러그인으로 코드를 바인딩하려고 했습니까? –

+0

나는이 방법을 사용하기를 희망하면서이 방법들을 아직 시도하지 않았다. 그러나 이제는 원래 생각했던 것보다 일하기가 더 어려워 졌으므로 나는 다른 방법을 찾을 수 있습니다. jQuery 폼 유효성 검사기 플러그인으로 갈 것입니다. 감사. – nicorellius

답변

0

많은 고통을 겪은 후 iFrame을 사용하지 않고이 문제를 다시 해결하기로 결정했습니다. 나는 iFrame이 가장 좋은 방법이라고 생각했지만 적어도 내 현재의 이해 수준에서는 내가 틀렸다는 것을 깨달았습니다. 그러나,이 방법으로, 나는 성공적으로 fancyBox 팝업에서 경고를 호출 할 수 있습니다

http://jsfiddle.net/nicorellius/d4KVs/

내가 너무 여기에 기존 검증을 사용할 수 있다고 생각합니다.

<a href="#test" class="fancy-popup">fancy link</a> 

나는 한 곳에서 HTML을 넣어 기존 fancyBox 기술을 사용하여 참조 : 여기

변경 HTML입니다.

그러나 나는 모든 것을 포기하지 않았습니다. 나는 계속 그 일에 집중하면서 iFrame을 사용하여 해결책을 찾았습니다. 나는했지만 나는 원래 계획을 설정하고 스크립트 사용 확실하지 정확히 :

function alert_me() { 
     $.fancybox.inner.find('iframe').contents().find(
      'input.click-me').click(function() { 
       alert("fancybox has been foiled!!!"); 
     }); 
    } 

을 지금 경고 상자가 iframe을 fancyBox 내에서 나타납니다.

이 솔루션은 다음과 같습니다. 동일한 도메인으로 제한 될 수 있으므로 프로덕션에서는 작동하지 않을 수 있습니다. 빠른 테스트를 실행했는데 크로스 도메인에서 작동하는 것 같지만 나중에 문제가 발생할 것이라는 느낌이 들었습니다 ...