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

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

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

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

Ответы

Ответ 1

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

Ответ 2

Тони. На мой взгляд, ключевым моментом этого трюка является то, что вы должны зафиксировать высоту iframe. Затем вы можете применить 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.

Ответ 3

Я пытался показать iframe в своих приложениях WebView, у меня была проблема не удалять нижнюю 30px моего iframe с использованием переполнения CSS: hidden; '. Способ, которым я обходился, заключался в том, чтобы создать собственный файл index.html и сохранить его локально как актив в моем приложении.

Если у вас нет папки "активы" в вашем проекте, перейдите к шагу 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);

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