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

Question

我有一个使用媒体查询的 CSS 样式表。我的主页只是一个 100% x 100% 的背景图像，我想在其上放置一个居中的 iframe，它将有一个基于媒体查询结果的源。

例如:

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(包括附加内容)。

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

框架源:__.htm;

iframe 源代码:_.htm;

框架源:url(___.htm);

iframe src: url(___.htm);

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

等等

*下划线为页面名称。

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

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

Answer 1

您可以 match based on attribute但是你不能只使用 CSS 设置属性¹

但是，您可以使用一小段 JavaScript 来检测媒体查询的结果(尽管是间接的):

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

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

As far as I know there is no direct access to media queries from JavaScript. You can’t read out whether the example media query above has fired or not.

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

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