嵌入式Facebook的帖子在UIWebView中无法正常显示 [英] Embedded Facebook post does not shows properly in UIWebView
本文介绍了嵌入式Facebook的帖子在UIWebView中无法正常显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正试图在 UIWebView 中显示Facebook嵌入的帖子。
我从Facebook开发人员门户网站获取示例代码，并将其加载到 UIWebView 中。
只看空白屏幕。
I'm trying to show facebook embedded post inUIWebView.
I get sample code from facebook developer portal and load it into UIWebView.
And see only blank screen.
然后我把这段代码放在本地的html文件中，并在Chrome中打开。仍然没有，但我看到嵌入出现了半秒钟，然后消失了。
我尝试了许多不同的嵌入式html示例，结果相同。
Then I put this code in local html file and opened it in Chrome. Still nothing, but i see that embed appeared in half second and then vanished. I try many different embedded html examples with same result.
这是我的代码：
<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>
推荐答案
解决问题的唯一方法是创建代理服务与Facebook嵌入。将HTML代码插入到UIWebView之前，请检查fb-post和fb-video：
The only way to resolve the problem is create a proxy service with facebook-embed. Before insert your HTML-code into UIWebView check it for fb-post and 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 Controller）：
And my remote page source code (PHP Phalcon Controller):
// 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>
这篇关于嵌入式Facebook的帖子在UIWebView中无法正常显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
