嵌入式 Facebook 帖子无法在 UIWebView 中正确显示
Posted
技术标签:
【中文标题】嵌入式 Facebook 帖子无法在 UIWebView 中正确显示【英文标题】：Embedded Facebook post does not shows properly in UIWebView 【发布时间】：2015-05-19 12:13:58 【问题描述】：我正在尝试在UIWebView 中显示 Facebook 嵌入式帖子。
我从 facebook 开发者门户获取示例代码并将其加载到 UIWebView。
并且只看到空白屏幕。
然后我把这段代码放在本地 html 文件中并在 Chrome 中打开它。仍然没有，但我看到嵌入在半秒内出现然后消失了。 我尝试了许多不同的嵌入式 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->
<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>
【问题讨论】：
添加脚本的原因是什么？ 我遇到了同样的问题。当将包含此内容的本地 html 文件加载到 Chrome 中时，我将它放在实际的服务器上并像任何其他网站一样点击它，视频终于出现了。它一定与尝试使用不是“http(s)”的协议加载 html 有关。 【参考方案1】：我找不到在 HTML 中添加脚本的任何理由，正如您所说，您在 FB 文档中找到了示例代码。
以下代码运行良好：-
<html>
<body>
<div id="fb-root"></div>
<div class="fb-post" data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" data->
<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风格”。只有纯文本。我想像许多网站一样嵌入帖子。据我了解，脚本需要加载 facebook css、加载图像和处理操作。【参考方案2】：解决问题的唯一方法是使用 facebook-embed 创建代理服务。在将 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 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-></div>
<script src="https://connect.facebook.net/<?= $locale ?>/sdk.js#xfbml=1&version=v2.3"></script>
</body>
</html>
示例（模糊文本是我在 fb-embed 上的 HTML）：
【讨论】：
嗯，截图中不是嵌入了 Twitter 吗？以上是关于嵌入式 Facebook 帖子无法在 UIWebView 中正确显示的主要内容，如果未能解决你的问题，请参考以下文章
UIWebView 未正确加载 JavaScript - 嵌入式 Facebook 帖子
有没有办法在 iframe 中嵌入 Facebook/Twitter 帖子/视频？