Поле комментариев Facebook внутри UIWebView не имеет нужной высоты

Я пытаюсь загрузить следующий HTML внутри UIWebView.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <body>
        <div id="fb-root"></div>
        <script>
           window.fbAsyncInit = function() {
            FB.init({
              appId      : 'myAppId',
              status     : true,
              xfbml      : true
            });
            FB.Event.subscribe("xfbml.render", function(response) {          
                FB.Canvas.setSize();
            });
          };

          (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 = "http://connect.facebook.net/en_US/all.js";
             fjs.parentNode.insertBefore(js, fjs);
           }(document, 'script', 'facebook-jssdk'));

        </script>

        <div class="fb-comments" data-href="http://www.google.com/" data-num-posts="10"></div>
    </body>
</html>

В браузере он корректно отображает поле для комментариев, и FB.Canvas.setSize() соответственно изменяет высоту (без нее высота интервала iframe устанавливается на 160).

Эта функция setSize (), по-видимому, ничего не делает внутри UIWebView, возможно, потому, что схема URL не http или https. Я не могу проверить это, потому что отладчик Safari не показывает мне сообщение "Небезопасная попытка JavaScript".

Я загружаю UIWebView с помощью loadHTMLString:baseURL:

Как я могу получить окно комментариев Facebook, чтобы иметь соответствующую высоту?

Примечания стороны:

Аналогичный вопрос: невозможно загрузить полные плагины комментариев Facebook внутри iOS UIWebView

Разбираясь в all.js в фейсбуке, я нашел этот код внутри функции комментариев (если вы ищете, посмотрите 'sdk.XFBML.Comments'), которая устанавливает высоту

getSize: function() {
if (this._attr.mobile) return {
    width: '100%',
    height: 160
};
return {
    width: this._attr.width,
    height: 160
};

3 ответа

Решение

Та же проблема здесь. Решение не заключалось в использовании локального файла HTML (или строки HTML). Загрузите файл HTML на сервер и используйте:

NSURL *url = [NSURL URLWithString:@"http://www.blablblab.com/yourfile.html"]; 
[self.webview loadRequest:[NSURLRequest requestWithURL:url]];

вместо:

[self.webview loadHTMLString:localString baseURL:nil];

Я еще не выяснил, почему существует различие в макете, когда файл находится на сервере, но когда это локальный файл, высота моего просмотра комментариев в Facebook всегда была уменьшена до "height:160".

Вы правы, проблема в том, что схема не http или https. SDK не поддерживает другие схемы и, следовательно, не сможет инициализироваться, а setSize() ничего не сделает. К сожалению, вам нужно найти другой обходной путь, чтобы получить эту функциональность.

Я тоже сталкивался с этой проблемой, но из-за внутренних требований нам пришлось загружать веб-представление из HTML-строки. Мы обнаружили, что если вы измените значение представления "Комментарии" на "Авто", оно будет отображаться так, как ожидается.

Подождите, пока веб-просмотр полностью завершит загрузку, затем запустите:

[self.webview stringByEvaluatingJavaScriptFromString: @"$(\".fb-comments span > iframe\").css(\"height\",\"auto\");"];

Это решило проблему для нас.

Другие вопросы по тегам