是否可以在 CSS 样式表中设置 I-Frame 源？

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>

因此宽度范围是 400 像素到 500 像素，对于此范围内的任何屏幕，内容都将位于居中的 iframe 中，更宽的屏幕具有更大的背景图像可见边距。现在我的问题是我希望 iframe 源根据屏幕大小而改变，所以我可以在小屏幕上将源作为 mobile.htm（显示一个非常基本的网站版本），在标准.htm（中级版本）上大屏幕上的平均屏幕和 large.htm（包括其他内容）。

但是，我无法得到任何我想这样做的东西。我假设由媒体查询确定它必须是 CSS 中列出的 iframe 的属性？我已经尝试了以下所有组合：

帧源：__.htm;

iframe src：_.htm;

帧源：url(___.htm);

iframe src: url(___.htm);

frame src: url ("__.htm");

等等

*下划线为页面名称。

但到目前为止没有任何效果。

有人知道这是否可能吗？如果有怎么办？并且请温和地解释我对此很陌生，在我前进的过程中尝试自学并学习零碎的东西，因为我需要它们来实现我想要的......到目前为止进展顺利，但让我难过几天了！

Answer 1

您可以match based on attribute，但不能仅使用 CSS 设置属性¹

但是，您可以使用 JavaScript 的小 sn-p 来检测媒体查询的结果（尽管是间接的）：

• 使用媒体查询将属性值应用于IFRAME
• 使用 JavaScript 选择具有该属性值的元素（jQuery selectors 将适用于此，尽管可能涉及一些迭代）
• 相应地更新src

但是，媒体查询和 JavaScript 之间并没有直接的关联。来自一篇关于将媒体查询与 JS 配对的文章：

据我所知，无法直接访问来自 JavaScript。您无法读出上面的示例媒体查询是否 解雇与否。

Full Article 建议一些基于脚本的变通方法，以从脚本返回与媒体查询结果一致的结果。

^{1 - 至少不是以广泛支持的基于标准的方式。使用 IE 专有表达式在 CSS 中执行代码存在一些技巧（所有这些现在都已弃用）。}