如何在 HTML5 中设置 iframe 高度:auto

2024-01-14

我正在尝试使 iframe 高度自动(100%),因此搜索了很多示例。

但问题是......它在 IE 中不能很好地工作,只能在 Chrome 中工作。

<div class="stockIframe ">
<iframe src="http://google.com" onload="autoResize(this)" height="100%" width="100%"></iframe> 
</div>

html,body { height: 100% }
.stockIframe {  width:100%; height:100%; }
.stockIframe iframe {  width:100%; height:100%; border:0;overflow:hidden }


<script>
function autoResize(i)
{
    var iframeHeight=
    (i).contentWindow.document.body.scrollHeight;
    (i).height=iframeHeight+20;
}


</script>

谁知道怎么修它 ?


我看你的代码没有问题,但不要忘记style tag

我在 IE 11 上测试过,它可以工作。

<div class="stockIframe ">
    <iframe src="http://google.com" onload="autoResize(this)" height="100%" width="100"></iframe> 
</div>

<style>
   html,body { height: 100% }
   .stockIframe {  width:100%; height:100%; }
   .stockIframe iframe {  width:100%; height:100%; border:0;overflow:hidden }
</style>

<script>
   function autoResize(i) {
     var iframeHeight=
     (i).contentWindow.document.body.scrollHeight;
     (i).height=iframeHeight+20;
   } 
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 HTML5 中设置 iframe 高度:auto 的相关文章

  • Safari 10.0.1 未从 srcset 选择正确的图像

    Safari 无法正确处理我网站上某些图像的 srcset 并且完全忽略我在尺寸属性中设置的规则 如果您单击下面的链接并在 Safari 中查看它 您将看到顶部的图像以其原始尺寸显示 而不是我生成的尺寸 但是 在页面底部它有效吗 并已下载为
  • CSS - 单个图像文件与多个文件的优点

    我注意到现在很多网站将所有图像都放在单个文件中 然后使用背景位置来偏移屏幕上显示的矩形 这是出于性能原因吗 如果是这样为什么 这称为 CSS 精灵 使用它有几个原因 对服务器的请求更少 文件大小稍小 因为大图像比单独的图像要小一些 预加载图
  • 如何在 HTML 元素中使用 CSS 设置特定单词的样式?

    如何设置其中特定单词的样式 p 标签 前任 STUDIO X是有史以来最好的工作室 如何使用 css 将 STUDIO X 设为与 is the best studio ever 不同的字体 你应该做这个 p font size 12px
  • 缩放网页内容上的特定元素(HTML、CSS、JavaScript)

    如果用户在移动设备上缩放网站 我只想缩放网站的特定元素 某个 div 下图展示了我的想法 如您所见 测试已缩放 但顶部 div 保持相同大小 仅包含 test 的 div 被缩放 缩放 有人可以给我一些关于如何实现这一目标的提示吗 我真的不
  • 是否可以使用 jQuery UI 限制 selectmenu 小部件的高度?

    我一直在尝试通过设置来做到这一点size来源的属性select元素 但它被忽略了 小部件似乎没有任何高度设置选项 是否可以 该小部件当前在隐藏了溢出的 div 对话框内工作 因此下拉列表 始终为 26 个项目 会从 div 中消失 一些CS
  • 严格的 DocType 在 FF/Chrome 中强制规定最小表格行高

    我以前从未注意到的事情 但似乎在 Chrome Firefox 可能还有 Opera Safari 我没有专门检查这些 中 使用严格的文档类型可以防止表行显示小于我无法显示的值来确定计算 以下文档在 IE7 中的显示方式与人们想象的一样 所
  • 无法删除重叠的框阴影

    更具体地说 我使用的是聚合物纸影 我正在尝试删除一个的两侧paper shadowbox 来创建一个简单的箭头框 但我似乎无法摆脱它 我试过删除position absolute 但这似乎并没有消除重叠的行为 这是我的 html css 的
  • HTML5旋转动画——如何显示“硬币的另一面”?

    考虑到这个 JSFiddle 旋转示例 https jsfiddle net 194288aw HTML div class container div class coin div class face heads Hey div div
  • 为什么inline-block元素出现在inline元素的下方?如何让它们出现在同一行?

    我目前正在尝试理解基本的 HTML 和 CSS 概念 并遇到了一个非常奇怪的问题 我有两个元素 一个具有 display inline 另一个具有 display inline block 我正在尝试创建一个列表 类似的东西1 SOME C
  • 是否可以将CSS应用于半个字符?

    我在寻找什么 一种打造风格的方法HALF一个角色的 在这种情况下 一半的字母是透明的 我目前搜索和尝试过的内容 没有运气 设置半个字符 字母样式的方法 使用 CSS 或 JavaScript 设置字符的一部分样式 将 CSS 应用于字符的
  • 将单选按钮放置在图像上

    我试图在图像上的确切位置放置一些单选按钮 我已将两者都放在 Div 中 但我不知道下一步该怎么做 这是我想要放置单选按钮的位置 红色圆圈 到目前为止 这是我的代码 center display block margin left auto
  • iPhone 上的 Chrome 溢出空白页面上的内容(仅在新选项卡上,而不是重新加载)

    在 iOS Chrome 上 正文会在没有内容的新选项卡或页面上溢出 但如果重新加载页面 问题就会得到解决 它会给位于底部的任何元素 绝对或固定 带来问题 这是重现问题的代码
  • 将 html 转换为 pdf 时防止表格单元格跨页破坏

    使用 Google Apps 脚本 我有一个 html 模板 我填写该模板 然后以 pdf 形式发送 通过传真和 或电子邮件 该模板包括一个带有问题 答案的两列表格 如果行数足够多 表格会在pdf中跨页分页 并且分页符通常发生在单元格的中间
  • 边界半径圆

    我有这个代码 span p margin 0 span background color red display inline block border radius 50 span p 25 p p 08 p span 我想在我的跨度上画
  • 具有最大高度和滚动的动态内容的对话框+页脚CSS

    我有一个dialog with 位置 绝对 and a 最大高度放 这最大高度财产是set从外面by a javascript框架 jQuery UI 对话框 所以我无法控制它 里面有 2 个 div 其中一个充满了动态内容 and a 静
  • 有 CSS 父选择器吗?

    我该如何选择 li 元素是锚元素的直接父元素 举个例子 我的 CSS 应该是这样的 li lt a active property value 显然 有多种方法可以使用 JavaScript 实现此目的 但我希望 CSS Level 2 本
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • 默认情况下嵌入带字幕的 Youtube 不起作用

    我正在尝试嵌入 Youtube 电影 并希望默认情况下打开字幕 From https developers google com youtube player parameters cc load policy https develope
  • 如何在表格的 tbody/thead 部分周围创建边框?

    我正在尝试创建一个包含表格数据的页面 该页面必须显示为多个表格 然而 我有两个相互冲突的要求需要解决 每个表格周围都必须有边框 每个表格的列宽必须能够根据内容重新调整大小 但是 所有表中的列宽必须一致 即列的大小基于所有表中该列中最大的单元
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到

随机推荐