embedded式Facebook的post在UIWebView中显示不正确

我试图在UIWebView显示Facebookembedded式张贴。 我从facebook开发人员门户获取示例代码并将其加载到UIWebView 。 只看到空白的屏幕。

然后我把这个代码放在本地html文件中,并在Chrome中打开它。 还是没有,但是我看到,embedded出现在半秒钟,然后消失。 我尝试了许多不同的embedded式html示例,结果相同。

这是我的代码:

 <html> <body> <div id="fb-root"></div> <script>(function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v2.3&appId=334367389999440"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-post" data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" data-width="500"> <div class="fb-xfbml-parse-ignore"> <blockquote cite="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"><p>Be the first to know when we release a new video by subscribing to our official Facebook Developers YouTube channel! http://www.youtube.com/facebookdevelopers</p>Posted by <a href="https://www.facebook.com/FacebookDevelopers">Facebook Developers</a> on <a href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553">29 Май 2013 г.</a> </blockquote> </div> </div> </body> </html> 

我没有find在HTML中添加脚本的任何理由,正如你所说的,你已经在FB文档中find示例代码。

下面的代码工作正常: –

 <html> <body> <div id="fb-root"></div> <div class="fb-post" data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" data-width="500"> <div class="fb-xfbml-parse-ignore"> <blockquote cite="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"><p>Be the first to know when we release a new video by subscribing to our official Facebook Developers YouTube channel! http://www.youtube.com/facebookdevelopers</p>Posted by <a href="https://www.facebook.com/FacebookDevelopers">Facebook Developers</a> on <a href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553">29 Май 2013 г.</a> </blockquote> </div> </div> </body> </html> 

解决这个问题的唯一方法就是用facebook-embed创build一个代理服务。 在将您的HTML代码插入到UIWebView之前,请检查它是否为fb-post和fb-video:

 // Facebook Video Embed if ([HTMLcontent rangeOfString:@"fb-video"].location != NSNotFound) { [self appendFBEmbed:htmlContent type:@"video"]; } // Facebook Post Embed if ([HTMLcontent rangeOfString:@"fb-post"].location != NSNotFound) { [self appendFBEmbed:htmlContent type:@"post"]; } ... // Your some code before </body></html> [htmlContent appendString:@"</body></html>"]; [[self webView] loadHTMLString:[self HTMLcontent] baseURL:nil]; ... - (void)appendFBEmbed:(NSMutableString*)html type:(NSString* )type { NSString *locale = getYourCurrentLocaleIdentifier(); [html appendFormat:@"<script type=\"text/javascript\">"]; [html appendFormat:@"var items = document.getElementsByClassName('fb-%@');", type]; [html appendFormat:@"for (i=0; i<items.length;i++) {"]; [html appendFormat:@" var item = items[i];"]; [html appendFormat:@" var url = item.getAttribute(\"data-href\");"]; [html appendFormat:@" var src = 'http://YOUR-APP-HOST/facebook/emded.html?type=%@&url=' + encodeURIComponent(url) + '&locale=%@&width=%d';", type, locale, getYourCurrentDisplayWidth()]; [html appendFormat:@" item.innerHTML = '<iframe class=\"facebook fb-%@\" frameborder=\"0\" src=\"' + src + '\"></iframe>';", type]; [html appendFormat:@"}"]; [html appendFormat:@"</script>"]; } 

和我的远程页面源代码(PHP Phalcon控制器):

 // FacebookController.php <?php class FacebookController extends \Phalcon\Mvc\Controller { public function indexAction() { $type = trim($this->request->get('type')); if (in_array($type, ['post', 'video']) === FALSE) { throw new \Exception('Unknown fb-post type'); } $url = trim($this->request->get('url')); $host = parse_url($url, \PHP_URL_HOST); if ($host === FALSE) { throw new \Exception('Invalid URL'); // URL is not URL } if ($host !== NULL /* related URL */ && $host !== 'facebook.com' && $host !== 'www.facebook.com') { throw new \Exception('Forbidden URL'); // Not a Facebook-URL } $locale = trim($this->request->get('locale')); if ($locale) { if (strlen($locale) > 10) { throw new \Exception('Invalid Locale'); // } $localesXML = new \SimpleXMLElement(ROOT_PATH . '/../data/facebook-locales.xml', NULL, TRUE); // Where ROOT_PATH . '/../data/facebook-locales.xml is a local copy of https://www.facebook.com/translations/FacebookLocales.xml $result = $localesXML->xpath('//representation[.="' . htmlentities($locale) . '"]'); if (count($result) > 0) { $locale = (string) $result[0]; } else { $locale = NULL; } } else { $locale = NULL; } if ($locale === NULL) { $locale = "en_US"; } $width = intval(trim($this->request->get('width'))); if ($width < 100 || $width > 3000) { throw new \Exception('Invalid width param'); } $viewData = [ 'type' => $type, 'url' => $url, 'width' => $width, 'locale' => $locale, ]; foreach ($viewData as $k => $v) { $this->view->setVar($k, $v); } } } 

 <!-- /views/facebook/index.phtml --> <html> <body> <div class="fb-<?= $type ?>" data-href="<?= $url ?>" data-width="<?= $width ?>"></div> <script src="https://connect.facebook.net/<?= $locale ?>/sdk.js#xfbml=1&version=v2.3"></script> </body> </html> 

示例(blured文本是我的HTML over fb-embed):

在这里输入图像说明

在这里输入图像说明