Question

我试图在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-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>

Answer 1

我没有找到在HTML中添加脚本的任何理由，正如您所说，您已经在FB文档中找到了示例代码。

下面的代码工作正常： -

<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>

Answer 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-width="<?= $width ?>"></div>
        <script src="https://connect.facebook.net/<?= $locale ?>/sdk.js#xfbml=1&version=v2.3"></script>
    </body>
</html>

嵌入式Facebook帖子在UIWebView中无法正确显示

2 个答案:

示例（模糊文本是我的HTML over fb-embed）：