в зависимости от того, ГДЕ вы вызываете этот сценарий, он может перезаписать существующий документ.
Вообще говоря, именно поэтому следует избегать document.write - ну, и даже когда он работает, он вызывает «повторную обработку» документа, что может привести к увеличению времени загрузки страницы.
Поскольку все, что у вас есть, — это точки останова, и все эти iframe загружают один и тот же контент — в наши дни, если вы хотите создать адаптивный макет, это НЕ задача JavaScript!
Есть ДВА способа сделать это, первый — с помощью медиа-запросов:
HTML:
.responsiveFrame {
position:relative;
/*
We shouldn't have to declare a width on a DIV, but it fixes
IE positioning thanks to "haslayout" all the way back to IE
5.5, but it ALSO fixes a quirk that can happen in some layouts
in SOME versions of Firefox. Better safe than sorry!
*/
width:100%;
/*
padding bottom == desired frame aspect ratio.
Basically just height divided by width as percent
So 4:3 aspect would be 75%, 16:9 would be 56.25%,
5:4 would be 80%, etc, etc...
*/
padding-bottom:75%;
}
.responsiveFrame iframe {
position:absolute;
/*
We shouldn't have to say top or left here, but... well...
Some browsers have really crappy implementations of the spec
*/
top:0;
left:0;
width:100%;
height:100%;
}
Код (разметка): это то, что браузеры до CSS3 получают за размер.
Он же IE8/раньше.
НУ ЧТО Ж. Они до сих пор так хорошо снимают видео.
ЗАТЕМ этот CSS выполняет тяжелую работу.
<div class="responsiveFrame"> <iframe src="[URL='https://lumtu.com/yti/PAbbAPTBodHRwczovL3lvdXR1YmUuY29tL2VtYmVkL1Y5VE90RGprN1FzP3Jl3Pz']https://www.youtube.com/embed/V9TOtDjk7Qs?rel=0[/URL]" width="290" height="218" frameborder="0" allowfullscreen ></iframe> </div>
Код (разметка): Или что-то в этом роде.
Этот метод приличный, но не очень.
эффективный с точки зрения автоматического изменения размера.
Второй метод, с которым я столкнулся совсем недавно, мне нравится больше, поскольку он дает вам бесконечные размеры, которые автоматически вписываются во все, во что вы их поместите.
HTML просто получает дополнительный DIV:
@media (min-width:442px) { .responsiveFrame { width:400px; height:300px; } } @media (min-width:642px) { .responsiveFrame { width:600px; height:450px; } } @media (min-width:782px) { .responsiveFrame { width:740px; height:555px; } }
Код (разметка): Приятная особенность CSS-элементов заключается в том, что объявления процентного заполнения основаны на ширине родительского элемента.
Если мы абсолютно позиционируем IFRAME внутри DIV, установив для него значение и высоту на 100%, мы можем дополнить DIV снизу на процентную высоту, что всегда будет поддерживать правильный размер IFRAME.
<iframe src="[URL='https://lumtu.com/yti/PAbbAPTBodHRwczovL3lvdXR1YmUuY29tL2VtYmVkL1Y5VE90RGprN1FzP3Jl3Pz']https://www.youtube.com/embed/V9TOtDjk7Qs?rel=0[/URL]" width="290" height="218" frameborder="0" allowfullscreen class="responsiveFrame" ></iframe>
Код (разметка): этот метод работает в большинстве браузеров, даже в старых.
DIV расширится до ширины всего, что у вас есть внутри, нижнее дополнение увеличит высоту DIV до процента от этой ширины, а абсолютно позиционированный iframe внутри него будет масштабироваться до родительского контейнера.
Никаких скрипттардеров не нужно! Вероятно, будет работать как минимум до IE6.
В наши дни люди слишком быстро погружаются в JS. В 99,99% случаев, если это проблема с макетом,
НЕ ИСПОЛЬЗУЙТЕ JAVASCRIPT в качестве ответа!
![[themeforest] Eduma 3.1.1- Шаблон образования для WordPress](/assets/images/icons/forum1.png){kind=icon}
![[дмитрий Черёмушкин] Санкции Русал И En+. Что Нам Теперь Делать? (большой Видео Обзор) 10.04.2018](/assets/images/icons/forum0.png){kind=icon}
![[WOOTHEMES] 52 Woocommerce расширения + Updates](/assets/images/icons/forum6.png){kind=icon}