отображение и скрытие элемента, работающего на рабочем столе, но не на мобильном - PullRequest
Новая
       30

отображение и скрытие элемента, работающего на рабочем столе, но не на мобильном

0 голосов
/ 06 апреля 2019

Я использую условие onload в теле, чтобы скрыть предварительный загрузчик и показать iframe после загрузки страницы.Это нормально работает на рабочем столе, но не на мобильном (Android).

Я пробовал другие методы для preloader, но они не работают.Итак, я пришел к такому решению:

  • сделать обертку для iframe с видимостью, изначально установленной как скрытая
  • сделать предзагрузчик div с фоновой анимацией, изначально отображаемой,
  • с отрицательным верхним полем, равным высоте iframe
  • , используйте условие onload для: установки отображения предварительного загрузчика в none и установки видимости оболочки iframeto visible

Работает как брелок на рабочем столе, но не на мобильном.Я включил alert, и это работает, поэтому условие срабатывает, но настройки дисплея и видимости не затрагиваются.

Я также пробовал document.getElementById("xxxx").hidden = true, но он также не работает.

CSS 

#preloader2 {
background:url( ../ajax-loader.gif) center center no-repeat;
min-height:400px;margin-top: -1500px;
}
#iframewrapper {
visibility: hidden;
}

HTML 

<body onload="preloader">
<iframe id="iframewrapper" src="https://example.com" width="100%"   height="1500px" scrolling="no" allowfullscreen="allowfullscreen">
</iframe>
<div id="preloader2">
</div>
<script>
function preloader() {
alert("Page is loaded");
document.getElementById("preloader2").style.display = "none";
document.getElementById("iframewrapper").style.visibility = "visible"; 
}
</script>
</body>

Мне нравится, когда этот скрипт работает в мобильном браузере.

Это тестовая страница с актуальной проблемой:

https://autocenterbol.nl/tst/test-wrapper/

...