2010-03-25 4 views
5

Facebook Connect를 사용하는 사이트에서 작업 중이며 최근에 기본 페이지가 캐시되고 로그인하지 않은 경우 일부 변경 사항이 적용되었습니다 (ajax 호출) 페이스 북의 연결 자바 스크립트를로드하고 연결 단추를 페이지로 렌더링합니다. 이것은 Internet Explorer 7과 8을 제외한 모든 곳에서 완벽하게 작동합니다. 이상한 부분은 단추를 숨겨진 가입/로그인 양식으로 렌더링하고 두 단추 중 하나를 표시하면 연결 단추가 표시됩니다. 당신은 모양을 here 걸릴 수 있으며 Internet Explorer가 아니라 Firefox에서 버튼을 볼 수 있습니다. 로그인을 클릭하면 버튼이 나타납니다.Internet Explorer에 Facebook Connect 아이콘이 나타나지 않습니다.

우리는이 같은 RJS와 아약스 호출에 응답하고있는 서버 측에서 이렇게하면 레일 응용 프로그램입니다 :

page['signin-status'].replace(:partial => "common/layout/signin_menu") 

    page.select('.facebook-connect').each do |value, index| 
    value.replace(render(:partial => '/facebook/signin')) 
    end 

    page << <<-eos 
    LazyLoader.load('http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php', function(){ 
    FB.init('#{Facebooker.api_key}','/xd_receiver.html'); 
    }); 
eos 

이 첫 번째 줄은 헤더를 대체하고, 두 번째에있는 연결 버튼입니다 모달 대화 상자. 헤더로 렌더링 부분 존재는 다음과 같습니다

<span id='signin-status'> 
    <%= fb_login_button(remote_function(:url => "/facebook/connect"))%> | 
    <%= link_to_function "Sign In", "showSignInForm();", :id => "signin" %> | 
    <%= link_to_function "Sign Up", "showSignUpForm();", :id => "signup" %> 
</span> 

모달 대화 상자로 렌더링 부분 존재는 다음과 같습니다

<div class='facebook-connect'> 
    <div id="FB_HiddenContainer" style="position:absolute; top:-10000px; width:0px; height:0px;" ></div> 
    <label>Or sign in with your Facebook account</label> 
    <%= fb_login_button(remote_function(:url => "/facebook/connect"))%> 
    </div> 

내가 모달 대화 상자를 표시하는 모든 원인 것을 매우 이상한 찾기 표시 할 아이콘. 누구든지 무슨 일이 일어나고 있는지에 대한 아이디어 나 제안이 있습니까?

+0

자신의 답변을 수락 된 것으로 표시하고 싶을 수 있습니다. – corprew

답변

1

페이지에서 ID가 FB_HiddenContainer 인 divs가 두 개 있는데 문제가 발생했습니다. div를 제거하면 div가 모든 것을 수정했습니다.

+1

안녕하세요. +0 현상금을 축하합니다. –

0

터프한 문자입니다. 이것은 답이 아니며 이미이 모든 것을 알고 있을지 모르지만 아마도 그것은 당신에게 어떤 통찰력을 줄 것입니다. 파이어 폭스의 코드의 생성 된 소스는 다음과 같습니다

<div class="facebook-connect"> 
     <div id="FB_HiddenContainer" style="position: absolute; top: -10000px; width: 0px; height: 0px;"> 
     <div> 
      <iframe name="fb_api_server" src="http://api.connect.facebook.com/static/v0.4/client_restserver.php?r=223617" class="FB_SERVER_IFRAME" frameborder="0" scrolling="no"></iframe> 
     </div> 
     <div> 
      <iframe name="loginStatus" src="http://www.facebook.com/extern/login_status.php?api_key=f3da6164fa3c312672cf5a24a53345e0&amp;extern=2&amp;channel=http%3A%2F%2Fplay.inspire2go.com%2Fxd_receiver.html&amp;locale=en_US" class="FB_SERVER_IFRAME" frameborder="0" scrolling="no"></iframe> 
     </div> 
     </div> 
     <label>Or sign in with your Facebook account</label> 
     <fb:login-button class=" fb_login_not_logged_in FB_login_button FB_ElementReady" onlogin="new Ajax.Request('/facebook/connect', {asynchronous:true, evalScripts:true})"><a id="RES_ID_fb_login" class="fbconnect_login_button"><img alt="Connect" src="http://static.ak.fbcdn.net/rsrc.php/zEYEC/hash/7e3mp7ee.png" id="RES_ID_fb_login_image"></a></fb:login-button> 
    </div> 

그러나, IE8에서 생성 된 코드는 다음과 같습니다

<DIV class=facebook-connect> 
     <DIV style="POSITION: absolute; WIDTH: 0px; HEIGHT: 0px; TOP: -10000px" id=FB_HiddenContainer> 
     <DIV> 
      <IFRAME class=FB_SERVER_IFRAME src="http://www.facebook.com/extern/login_status.php?api_key=f3da6164fa3c312672cf5a24a53345e0&extern=2&channel=http%3A%2F%2Fplay.inspire2go.com%2Fxd_receiver.html&locale=en_US" frameBorder=0 name=loginStatus scrolling=no></IFRAME> 
     </DIV> 
     <DIV> 
      <OBJECT id=flashXdComm name=flashXdComm classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 width=1 height=1 type=application/x-shockwave-flash> 
      <PARAM NAME="_cx" VALUE="26"> 
      <PARAM NAME="_cy" VALUE="26"> 
      <PARAM NAME="FlashVars" VALUE=""> 
      <PARAM NAME="Movie" VALUE="http://static.ak.fbcdn.net/rsrc.php/z9W3G/hash/b0l9i5c3.swf"> 
      <PARAM NAME="Src" VALUE="http://static.ak.fbcdn.net/rsrc.php/z9W3G/hash/b0l9i5c3.swf"> 
      <PARAM NAME="WMode" VALUE="Window"> 
      <PARAM NAME="Play" VALUE="-1"> 
      <PARAM NAME="Loop" VALUE="-1"> 
      <PARAM NAME="Quality" VALUE="High"> 
      <PARAM NAME="SAlign" VALUE=""> 
      <PARAM NAME="Menu" VALUE="-1"> 
      <PARAM NAME="Base" VALUE=""> 
      <PARAM NAME="AllowScriptAccess" VALUE="always"> 
      <PARAM NAME="Scale" VALUE="ShowAll"> 
      <PARAM NAME="DeviceFont" VALUE="0"> 
      <PARAM NAME="EmbedMovie" VALUE="0"> 
      <PARAM NAME="BGColor" VALUE="869CA7"> 
      <PARAM NAME="SWRemote" VALUE=""> 
      <PARAM NAME="MovieData" VALUE=""> 
      <PARAM NAME="SeamlessTabbing" VALUE="1"> 
      <PARAM NAME="Profile" VALUE="0"> 
      <PARAM NAME="ProfileAddress" VALUE=""> 
      <PARAM NAME="ProfilePort" VALUE="0"> 
      <PARAM NAME="AllowNetworking" VALUE="all"> 
      <PARAM NAME="AllowFullScreen" VALUE="false"> 
      </OBJECT> 
     </DIV> 
     </DIV> 
     <LABEL>Or sign in with your Facebook account</LABEL> 
     <?xml:namespace prefix = fb /> 
     <fb:login-button onlogin="new Ajax.Request('/facebook/connect', {asynchronous:true, evalScripts:true})"></fb:login-button> 
    </DIV> 

참고가 차이가 몇 여기. 먼저 <fb:login-button> 요소가 다릅니다. 우리가 알고 있듯이 IE8에서는 로그인 PNG 파일에 대한 참조가 누락되었습니다. 또한 Firefox에는 두 개의 요소가 있지만 IE8에서는 두 번째 이 FLash 객체로 대체됩니다.

LazyLoader() 함수로 참조 된 Facebook API가 브라우저 유형에 따라 다른 코드를 반환하는 것처럼 보입니다. 여기에서 어디로 가야할지 모르겠지만 나중에 기회가 생기면 나중에 체크인하겠습니다.

행운을 빈다.

+0

다시 확인하십시오. 니가 일하는 것 같아. 문제가 무엇인지 궁금하다. –

+0

안녕하세요 제프, 돌아 오지 못해 죄송합니다. 바쁜 주였습니다. 좀 더 가까이에서 보았을 때 중복 ID가 문제를 일으키는 것을 발견했습니다. –

1

같은 문제가 발생했습니다. 스크립트를 본문이 아닌 태그에로드하도록 수정했습니다.

그래서 :

<head runat="server"> 
    <!-- all other html tags excluded from this example --> 
    <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script> 
</head> 

그런 다음, 반드시 모든 것이로드 첫째하려면, 그래서 같이 태그의 onload 이벤트에 FB 초기화() 호출을 넣어 :

<body onload="FB.init('<%= ConfigurationManager.AppSettings["ApiKey"] %>', 'xd_receiver.htm', { 'reloadIfSessionStateChanged': true });"> 
    <!-- rest of your body --> 
</body> 

행운을 빕니다!

보다도,

-Auri 솔루션에

2

는 다른 브라우저와 미세 동안 나는 또한 IE와 동일한 문제가 있었다 ...

(www.aurigroup.com)이었다 사용 :

<html xmlns:fb="http://www.facebook.com/2008/fbml"> 

대신

<html> 
+0

OP 문제를 해결하지는 못했지만 해결해 주셔서 감사합니다. !!! – mazlix

관련 문제