2012-01-11 8 views
6

recaptcha 이미지를 다시로드하기 위해 아래 함수가 있습니다. 작동하지만 이미지를 다시로드하지만 이후에는 아무 것도하지 않습니다. 기본적으로 양식은 크기가 작아서이 recaptcha가 있으므로 축소하고 클릭하여 확대 할 수 있습니다. 사람이 reloadCAP()을 호출하는 "다른 captcha 가져 오기"를 누르면 더 큰 이미지의 클래스를 가지고 있는지 확인합니다. 그것은 새로운 이미지가로드 된 후 그 클래스와 CSS를 다시 요소에 추가해야하지만 그것은 작동하도록 할 수없는 경우. 어떤 아이디어?코드를 실행하십시오.

<div id="recaptcha_widget" class="formRow" style="display:none;"> 
    <span class="f_label">Enter Words Below:</span> 
    <input type="text" class="setWidth" id="recaptcha_response_field" name="recaptcha_response_field" /> 

    <div class="cantread"> 
     <strong>Can't read this?</strong><br /> 
     <a href="javascript:reloadCAP()">Get another CAPTCHA</a> 
    </div> 

    <div id="recaptcha_image"></div> <!-- image loaded into this div --> 
     <div class="clear"></div> 
     <span class="smalltext">(click to enlarge)</span> 

     <br clear="all" /> 
    </div> 
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LfzMMwSAAAAADV6D04jDE6fKwrJ57dXwOEW-vY3&lang=en"></script> 

답변

3
$("#recaptcha_widget img").one('load',function(){ 
    $("#recaptcha_widget img").addClass('largecap'); 
    $('#recaptcha_image').css('height', '62px'); 
}); 

이것은 당신이 다시로드하는 이미지의로드 이벤트에만 리스너 한 시간을 넣어 다음 folowing 코드를 실행합니다. 당신은 reloadCAP()

편집

확인 전화 새로운 청취자마다 첨부 싶지 않기 때문에

는 그래서 여기에 내가 문제가 믿는 무엇 여기 .one() 대신 .load()을 사용했다. Recaptcha.reload()으로 전화하면 <img />이 제거되고 새 것으로 바뀝니다. 따라서 이벤트를 첨부하려고 할 때 이미지가 제거되면 제거됩니다. 당신이해야 할 것은

장소는 recaptcha_image DIV에 클래스 largecap이며, 그것은 당신이 실제로 당신이 보안 문자 스타일을 할 수있는 사용자 정의 테마 등입니다 필요 같은 소리

.largecap img { 
    height: whatever; 
    width: whatever; 
} 
+0

음 ... 둘 다 시도해보십시오. 나를 위해. Recaptcha.reload(); 너무 효과가없는 것 –

+0

디버거에 오류가없는 것보다 선택기 중 하나가 제대로 작동하지 않는 것 같습니다. 질문에 HTML을 추가 할 수 있습니까? –

+0

는 html을 단지 지금 –

0

하지 이상적인 솔루션,하지만 당신은 Recaptcha.reload 위의 addClass 코드를 넣어() 단지 두 번째 또는 두하여 지연 수 :

function reloadCAP() { 
    if($("#recaptcha_widget img").hasClass('largecap')) { 
     Recaptcha.reload(); 
     $("#recaptcha_widget img").addClass('largecap'); 
     $('#recaptcha_image').css('height', '62px'); 
    } else { 
     Recaptcha.reload(); 
    } 
} 

는 여기에 대한 HTML입니다.

희망이 있습니다.

+0

나는 이것에 대한 몇 가지 다른 변형을 시도했지만 나에게 도움이되지 않았다./도움을 주셔서 감사합니다 –

0

처럼 보이게하기 위해 CSS 스타일을 수정/image/etc : https://developers.google.com/recaptcha/docs/customization

현재 구현을 고수하고 싶다면 Recaptcha.create()를 호출하기 전에 Recaptcha의 내장 (및 문서화되지 않은) 콜백 함수에 연결할 수 있습니다. reCAPTCHA를가 파괴하고 다시로드 새로운 IMG 매번를 작성하므로 수동으로 추가 한 스타일이 손실 될 수 있기 때문에

//Called after Recaptcha.reload() is finished loading 
Recaptcha._alias_finish_reload = Recaptcha.finish_reload; 
Recaptcha.finish_reload = function (challenge, b, c) { 
    //Call original function that creates the new img 
    Recaptcha._alias_finish_reload(challenge, b, c); 

    $("#recaptcha_widget img").toggleClass('largecap', true); 
} 

//Called when the initial challenge is received on page load 
Recaptcha._alias_challenge_callback = Recaptcha.challenge_callback; 
Recaptcha.challenge_callback= function() { 
    //Call original function that creates the new img 
    Recaptcha._alias_challenge_callback(); 

    $("#recaptcha_widget img").toggleClass('largecap', true); 
} 

당신도이 문제가 발생하는 이유는.

관련 문제