Переполнение iframe в Webview - PullRequest
Новая
       36

Переполнение iframe в Webview

21 голосов
/ 20 сентября 2010

Я сейчас создаю веб-приложение на Android. Мое приложение запускается в веб-просмотре и загружает стороннее содержимое через фреймы. Размер iframe фиксирован и не должен изменяться загруженным контентом.

В настольном браузере Chrome он работает нормально, а часть переполнения загруженного содержимого можно прокручивать с помощью полос прокрутки. Однако в веб-представлении Android iframe имеет тенденцию к изменению размера в зависимости от загруженного содержимого, что приводит к путанице в макете страницы.

Кто-нибудь еще сталкивался с такой же проблемой?

Ответы [ 3 ]

0 голосов
/ 23 октября 2010

Tony.На мой взгляд, ключевой момент этого трюка заключается в том, что вы должны зафиксировать высоту фрейма.Затем вы можете применить iscroll к любому элементу div в iframe.Вот небольшой фрагмент кода: 

    // disable default touchmove handler
    document.addEventListener('touchmove', function(e){
        e.preventDefault();
    });
    // make the div 'list' scrollable
    var myScroll = new iScroll('list'); // <div id='list'>Blah</div>

Я использую jQuery в коде, и он хорошо работает с iScroll.

0 голосов
/ 06 января 2017

Я пытался показать Iframe в своих приложениях WebView, у меня была проблема с невозможностью отрубить нижние 30 пикселей моего iframe с помощью CSS «overflow: hidden;». Я смог обойти это, создав собственный файл index.html и сохранив его локально как ресурс в моем приложении.

Если в вашем проекте нет папки «assets», перейдите к шагу 1

(это не то же самое, что папка 'res')

[В Windows 7]

Шаг 1 - Создать папку ресурсов: в вашем проекте Android Studio нажмите:

Файл -> Создать -> Папка -> Папка с активами

Изображение, показывающее, как сделать папку активов в Windows

Шаг 2 - Создайте файл index.html, который будет хранить ваш <iframes> в пределах <div> Вы можете скопировать приведенный ниже код для использования в качестве примера кода в файле index.html: 

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    </head>
    <body style="margin:0px;">
        <div style="width:605px;height:875px;overflow:hidden;">
           <iframe src="https://docs.google.com/presentation/d/1QyNNURCVBme50SAuIceq3sh7Ky74LuWNeEM8B910aC4/embed?start=true&loop=true&delayms=2000" scrolling="no" frameborder="0" width="605" height="905" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
        </div>
    </body>
</html>

Шаг 3 - вызов файла index.html в вашем WebView

Примечание. (Идентификатором этого примера является WebView 'main_ad', измените этот идентификатор на то, что вы когда-либо называли своим идентификатором веб-просмотра) 

WebView webView = (WebView) findViewById(R.id.main_ad);
webView.setWebViewClient(new WebViewClient());
webView.loadUrl("file:///android_asset/index.html");  //this is why you needed the assets folder
webView.getSettings().setJavaScriptEnabled(true);

Надеюсь, это поможет даже 1 человеку, работающему с веб-просмотрами и фреймами

0 голосов
/ 04 октября 2010

Я нашел способ избежать этой неприятной проблемы. Я отключил полосу прокрутки iframe и вместо этого использую iscroll в приложении. Эта полоса прокрутки почти такая же, как и у оригинала, но медленнее на моем телефоне HTC Magic.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...