Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   не загружать iframe, если ширина меньше 680px (https://javascript.ru/forum/dom-window/65722-ne-zagruzhat-iframe-esli-shirina-menshe-680px.html)

Ilya_Ru 04.11.2016 16:22

не загружать iframe, если ширина меньше 680px
 
Здравствуйте. Есть вот такой код с отложенной загрузкой iframe:
<style>
body {
  background:#53d5f3;
}
iframe {
  width:600px;
  height:500px;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var src   = "http://javascript.ru/forum/dom-window/",
    pause = 2000; 
$(function(){
  setTimeout(function(){
    $('.iframe').attr('src',src)
  }, pause);
});
</script>
<iframe class="iframe" src="" frameborder="0"></iframe>


А как в этом скрипте сделать так, чтобы iframe не загружался совсем при ширине экрана меньше 680px?

fuckingquest 04.11.2016 17:03

screen.width не то?

Ilya_Ru 04.11.2016 17:38

а пример привести не сможешь?)))

Pavel M. 04.11.2016 17:55

после строки
$(function(){
добавь строку
if (screen.width < 680) { return; }

Ilya_Ru 04.11.2016 18:06

<style>
body {
  background:#53d5f3;
}
iframe {
  width:100%;
  height:500px;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var src   = "http://javascript.ru/forum/dom-window/",
    pause = 2000; 
$(function(){
if (screen.width < 680) { return; }
  setTimeout(function(){
    $('.iframe').attr('src',src)
  }, pause);
});
</script>
<iframe class="iframe" src="" frameborder="0"></iframe>

Так? браузер сжимал до 500px, iframe все равно вылазиет

Pavel M. 04.11.2016 18:09

Цитата:

Сообщение от Ilya_Ru
Так? браузер сжимал до 500px, iframe все равно вылазиет

screen.width - это ширина экрана в пикселях
его тоже сжимал ?

если нужны размеры страницы или окна браузера почитай http://learn.javascript.ru/metrics-window

Ilya_Ru 04.11.2016 19:05

По сути, так?
<style>
body {
  background:#53d5f3;
}
iframe {
  width:100%;
  height:500px;
}
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var src   = "http://javascript.ru/forum/dom-window/",
    pause = 2000; 
$(function(){
alert(window.innerWidth);
if (window.innerWidth < 680) { return; }
  setTimeout(function(){
    $('.iframe').attr('src',src)
  }, pause);
});
</script>
<iframe class="iframe" src="" frameborder="0"></iframe>

Что-то не так. При размере 500px все равно грузит.

Pavel M. 04.11.2016 19:33

если про пример кода выше в этом форуме
то он запускается во фрейме
используйте в начале кода например
[HTML run width=600 height=600]
...

это будет имитировать окно 600 на 600

Ilya_Ru 04.11.2016 19:51

Я его запускал локально на смарте. Сейчас на сайте поправил, как вы писали.

На самом сайте наоборот, не запускается даже при значении в widch=900

Pavel M. 04.11.2016 19:55

у меня теперь пример выше, который 600x600 не загружает фрейм.

Это и нужно было ?

добавь в код для смартфона
после строки
$(function(){
строку
alert(window.innerWidth);

и будет понятно какую ширину браузер в смартфоне подразумевает.


Часовой пояс GMT +3, время: 12:13.