Возможно ли установить источник I-Frame в таблицу стилей CSS?

Question

У меня есть таблица стилей CSS, использующая медиа-запросы. Моя домашняя страница - это всего лишь фоновое изображение 100% x 100%, на которое я хочу разместить центрированный iframe, который будет иметь источник, основанный на результатах медиа-запроса.

EG:

CSS

@media all and (max-width: 500px) and (min-width: 400px), (min-width: 1151px) 

.frame1{ 
position:absolute; 
width:390px; 
left:50%; 
margin-left:-195px; 
} 

HTML

<iframe class="frame1"></iframe> 

Так диапазон ширина 400px на 500px и для любого экрана в этом диапазоне содержание будет в центрированный iframe, с более широким экраном, имеющим больший запас фонового изображения. Теперь, когда моя проблема ложится, я хочу, чтобы источник iframe изменялся в зависимости от размера экрана, поэтому я мог бы иметь источник как mobile.htm (показывающий очень базовую версию сайта) на небольших экранах standard.htm (версия среднего класса) на средние экраны и large.htm (дополнительный контент включен) на больших экранах.

Однако я не могу получить ничего, что, как я думал, для этого. Я предполагаю, что определяется медиа-запросом, он должен быть атрибутом iframe, указанным в CSS? Я пробовал все комбинации:

frame src: __ .htm;

iframe src: _ .htm;

рамка ЦСИ: URL (_ __ .htm);

IFrame ЦСИ: URL (_ __ .htm);

рамка ЦСИ: URL ("_ _ .htm");

т.д.

* Подчеркивания является названием страницы.

Но пока ничего не работает.

Кто-нибудь знает, возможно ли это? Если да, то как? И, пожалуйста, будьте осторожны с объяснениями. Я очень новичок в этом, пытаясь научиться самостоятельно, когда я иду и изучая кусочки, поскольку мне нужно, чтобы они достигли того, чего я хочу ... до сих пор шли хорошо, но у меня был сильный удар в течение нескольких дней!

Answer 1

Вы можете match based on attribute, но вы не можете установить атрибуты с помощью CSS только

Однако, вы можете использовать небольшой фрагмент кода JavaScript, чтобы обнаружить результат мультимедийного запроса (хотя и косвенно):

• использовать медиа-запрос, чтобы применить значение свойства к IFRAME
• выберите элемент (ы) с этим значением свойства, используя JavaScript (jQuery selectors будет работать для этого, хотя некоторые итерации могут быть вовлечены)
• обновление src соответственно

Тем не менее, на самом деле не прямая связь между медиа-запросов и JavaScript. Из статьи о сопряжении медиазапросов с JS:

Насколько я знаю, нет прямого доступа к запросам СМИ от JavaScript. Вы не можете прочитать, был ли запущен пример мультимедийного запроса выше .

Full Article предлагает некоторые обходные пути, основанные на сценариях, для получения результатов из сценария, которые согласуются с результатами медиа-запроса.

^{1 - По крайней мере, не в стандартном стиле, который широко поддерживается. Существуют хаки для выполнения кода внутри CSS с использованием проприетарных выражений IE (все из которых теперь устарели).}