2011-03-22 6 views
0

Facebook의 iframe에 표시된 외부 페이지의 내용에 특정 스타일 시트를 적용하고 싶습니다. Facebook의 너비 제한으로 인해 해당 페이지의 HTML을 변경하지 않고 페이지에서 하나의 열만 표시하고 싶습니다. 직접 방문하면 페이지에서 일반 CSS를 호출합니다. iframe을 통해 보았을 때, 그것은 페이스 북에 특정한 CSS를 부를 것이다.Facebook의 iframe에 다른 스타일 시트 지정

즉, iframe을 통해 콘텐츠를 표시 할 때 Facebook에서 특정 CSS 파일을 사용하게하려면 어떻게해야합니까? 다른 스타일 시트를 잡으려면 자바 스크립트를 사용해야합니까?

답변

-1

Iframe에 있기 때문에 동일한 원본 정책이 적용됩니다. 다른 도메인에서 가져온 것을 액세스 할 수 없습니다.

2

PHP를 사용하면 응용 프로그램이 Facebook iframe 내부에서 실행되는지 여부를 확인할 수 있습니다. $_REQUEST 배열을 확인하고 FB가 iframe에 전달하는 매개 변수를 검색해야합니다. 일반적으로 fb_으로 시작하며 앱에 대해 확인한 설정에 따라 달라질 수 있습니다.

이런 식으로 뭔가 작업을해야합니다 :

<?php 
    $fbFrame = false; 

    foreach ($_REQUEST as $key => $value) 
    { 
     if (strpos($key, "fb_") > -1) 
     { 
      $fbFrame = true; 
      break; 
     } 
    } 

    if (array_key_exists('signed_request', $_REQUEST) 
     $fbFrame = true; 
?> 

그런 다음, HTML 헤드 :

<head> 
<?php if ($fbFrame): ?> 
    <link rel="stylesheet" type="text/css" href="PATH_TO_FB_CSS" /> 
<?php else: ?> 
    <link rel="stylesheet" type="text/css" href="PATH_TO_NORMAL_CSS" /> 
<?php endif; ?> 
</head> 

을 당신이 fb_ 또는 당신의 자신의 시작의 매개 변수가없는 겠지 물론 을 $_GET 또는 $_POST에 입력해야합니다.

2

iframe에서 실행 중일 때와 다른 스타일을 인쇄하는 것처럼 쉽습니다. 사실, 다른 사이트에서 iframe 내부에서이 사이트를 실행하면 영향을 미칩니다. 하지만 현실적으로 페이스 북은 가장 중요한 것입니다.

이 광고는 저에게 효과적입니다. 희망은 당신을 위해 또한 작동합니다.

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=9" /> 
    <title>My Coolest Site</title> 
    <link type="text/css" href="/css/my-common-1.css" rel="stylesheet"> 
    <link type="text/css" href="/css/my-common-2.css" rel="stylesheet"> 
    <script type="text/javascript"> 
    if (top === self) { 
      document.write('<link type="text/css" href="/css/my-specific-1.css" rel="stylesheet">'); 
      document.write('<link type="text/css" href="/css/my-specific-2.css" rel="stylesheet">'); 

    } else { 
      document.write('<link type="text/css" href="/css/my-fb-1.css" rel="stylesheet">'); 
      document.write('<link type="text/css" href="/css/my-fb-2.css" rel="stylesheet">'); 
    } 
    </script>