相关疑难解决方法(0)
如何让IFrame在iOS Safari中响应？
问题在于,当您必须使用IFrame将内容插入网站时,那么在现代网络世界中,预计IFrame也会响应.从理论上讲它很简单,只需要使用<iframe width="100%"></iframe>或设置CSS宽度,iframe { width: 100%; }但在实践中它并不是那么简单,但它可以.
如果iframe内容完全响应并且可以在没有内部滚动条的情况下自行调整大小,那么iOS Safari将调整大小而iframe没有任何实际问题.
如果您考虑以下代码:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test</title>
<style type="text/css" rel="stylesheet">
#Main {
padding: 10px;
}
</style>
</head>
<body>
<h1>Iframe Isolation Test 13.17</h1>
<div id="Main">
<iframe height="950" width="100%" src="Content.html"></iframe>
</div>
</body>
</html>
使用Content.html:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test - Content</title>
<style type="text/css" rel="stylesheet">
#Main {
width: …推荐指数
解决办法
查看次数
使用Bootstrap响应iframe
我正在使用Bootstrap.
我有一个包含2或3个基于iframe的嵌入视频的文字.
此数据从数据库中获取.
如何让这些iframe响应？
示例代码:
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
<iframe src="http://youtube.com/...."></iframe>
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
<iframe src="http://youtube.com/...."></iframe>
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
<iframe src="http://youtube.com/...."></iframe>
</div>
</div>
这是一个动态数据.我怎样才能使其响应？
推荐指数
解决办法
查看次数
如何在没有纵横比假设的情况下使 iframe 响应？
如何在不假设纵横比的情况下使 iframe 响应？例如，内容可能具有任何宽度或高度，这在渲染之前是未知的。
请注意，您可以使用 Javascript。
例子：
<div id="iframe-container">
<iframe/>
</div>
调整它的大小iframe-container，使其内容几乎不适合内部而没有额外空间，换句话说，有足够的空间来容纳内容，因此可以在不滚动的情况下显示，但没有多余的空间。容器完美地包裹了 iframe。
这显示了如何使 iframe 响应，假设内容的纵横比为 16:9。但在这个问题中，纵横比是可变的。
推荐指数
解决办法
查看次数
是否可以在非响应式网站中加载响应式iframe？
在将此标记为重复之前,请允许我告诉您,这不是关于使iframe重新缩放,我不期望这样的答案:制作iframe响应
我的问题很容易解释:我的网站没有meta视口标记,宽度为(比方说)1000px.因此,当您在移动设备中加载它时,它会重新缩放以适应360px宽度,并且一切都非常小.
现在,我完全知道如何使iframe调整到任何宽度,但这里的问题是正在加载的网站也将显示宽度为1000px,即使这个具有meta视口标记.当然,这个iframe中的所有内容都显示得非常小.
现在的问题是:我是否可以使该iframe的内容以全宽显示,但不服从父文档的宽度,而是服从设备的宽度.(显然我不想要一个小的360px iframe).
这可能有助于您理解: 
编辑:很多人似乎不明白这一点,所以解释它的另一种方法是:
选择任何没有视口标记的网站
在上面涂上固定的框架
并尝试使iframe看起来像是在新标签上打开的(默认情况下,iframe的视口将像1000px一样,我希望它是手机的视口大小)
推荐指数
解决办法
查看次数
你能让 iFrame 响应吗？
我想在另一个网站的 WordPress 页面中嵌入一个网站。
iframed 网站是asp 中的联系表单处理页面，它没有响应。
我可以将它包装在一个响应式的 div 标签中，或者我可以让 iFrame 响应吗？
谢谢。
推荐指数
解决办法
查看次数
这个response-iframe-container代码段如何工作？
/* Responsive iFrame */
.responsive-iframe-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.responsive-iframe-container iframe,
.vresponsive-iframe-container object,
.vresponsive-iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
它做了一些神奇的伏都教,使嵌入式iframe谷歌日历变得响应,从而根据你的视图大小调整iframe方面.这很棒!
问题是:它 是如何工作的？position或者overflow没有看到做的伎俩.也不是所有其他属性.我猜这个伎俩vresponsive,但我还没有添加任何jscript来处理它,我甚至没有使用那个类.我使用的所有内容都responsive-iframe-container在链接中解释!
看起来它会更改iframe中的每个元素以调整其大小.从我卑微的观点来看,这真是太疯狂了.必须有一些魔术运动欺骗我!
推荐指数
解决办法
查看次数
IFRAMES是否仍然是跟踪SCORM SCO的必要条件
从html和javascript构建SCORM解决方案时,需要使用LMS进行跟踪,是否仍需要包含IFRAME中的所有页面或采用其他方法？在尝试创建响应式页面时,IFRAME中存在哪些困难？
推荐指数
解决办法
查看次数
如何在不使用div的情况下使iframe响应？
我从这篇文章(使iframe响应)中了解到,通过在iframe周围添加一个带有类的容器来使iframe响应,例如,
<div class="intrinsic-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>
</div>
是否有可能<iframe>...</iframe>直接嵌入我的帖子(不使用<div>...</div>)？我尝试了这些解决方案,但所有这些解决方案都不起作用.
PS:我在WordPress中使用两列布局.视频比例可以是16:9(来自YouTube),4:3(来自腾讯)等.这是一个临时演示.
推荐指数
解决办法
查看次数