为什么iframe的高度和宽度不能随内容而自动调节!

最新推荐文章于 2023-12-08 19:40:08 发布
最新推荐文章于 2023-12-08 19:40:08 发布
阅读量1.2k 收藏
点赞数
分类专栏： vb.net 文章标签： iframe xhtml 文档 html 语言 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caobingyi/article/details/4714880
版权

    最近,模仿一个软件的时候,发现iframe的高度和宽度不能随内容而自动调节,除非指定iframe 的宽度和高度为具体的值;问了很多朋友也都不知道.很是伤脑筋啊!后来,在W3SCHOOL中的"HTML <iframe> 标签"一节中看到这么一句话:在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素.我再看看自己写的页面,但是transitional,有些不一样.怀着好奇,把页面上的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这一行去掉,结果出乎意料,iframe可以自动调节高度和宽度了,太高兴了!接着我又找到三种文档类型的描述,我想,应该是dtd不支持iframe的这种用法!

下面是从W3SCHOOL抄来的,大家可以看看:

XHTML 定义了三种文件类型声明。

使用最普遍的是 XHTML Transitional。

<!DOCTYPE> 是强制使用的。

一个 XHTML 文档有三个主要的部分：

  • DOCTYPE
  • Head
  • Body

基本的文档结构是这样的：

<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>

在 XHTML 文档中，文档类型声明总是位于首行。

一个 XHTML 的实例

这个一个简单的（最小化的） XHTML 文档：

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>

文档类型声明定义文档的类型：

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

文档的其余部分类似 HTML：

<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>

3种文档类型声明

  • DTD 规定了使用通用标记语言(SGML)的网页的语法。
  • 诸如 HTML 这样的通用标记语言应用使用 DTD 来规定应用于某种特定文档中的标签的规则，这些规则包括一系列的元素和实体的声明。
  • 在通用标记语言(SGML)的文档类型声明或 DTD 中，XHTML 被详细地进行了描述。
  • XHTML DTD 使用精确的可被计算机读取的语言来描述合法的 XHTML 标记的语法和句法。

存在三种XHTML文档类型：

  • STRICT（严格类型）
  • TRANSITIONAL（过渡类型）
  • FRAMESET（框架类型）

XHTML 1.0 的三种 XML 文档类型

XHTML 1.0 规定了三种 XML 文档类型，以对应上述三种 DTD。

XHTML 1.0 Strict

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在此情况下使用：需要干净的标记，避免表现上的混乱。请与层叠样式表配合使用。

XHTML 1.0 Transitional

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在此情况下使用：当需要利用 HTML 在表现上的特性时，并且当需要为那些不支持层叠样式表的浏览器编写 XHTML 时。

XHTML 1.0 Frameset

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

在此的情况下使用：需要使用HTML框架将浏览器窗口分割为两部分或更多框架时。

caobingyi
关注
专栏目录
Web-拾贝
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
多个iframe自动调整大小的问题
01-19
一个页面我有多个iframe，且每个iframe的src都不一样，高度也不一样。 怎样用一个函数，自动调整这个页面里所有iframe的高度呢？ function change_size(iframe) {     iframe.style.height=info_content.document.body.scrollHeight+1+”px”; } 我用过这种方式，但是等号后面的第一个对象不知道应该怎样动态显示。 比如： function change_size(no) {                 var el_name = “iframe”+no;                 
iframe自适应高度，Iframe显示不完整
蕃薯耀
08-13 4134
iframe自适应高度，Iframe显示不完整，兼容IE、Chrome、火狐 &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&g
页面嵌入ifram，但是iframe内的内容不随页面缩放变化
贾朝的博客
10-18 510
父页面内iframe的宽高不再使用rem为单位，采用px嵌入，同时监听浏览器变化（由于双击浏览器顶部，resize监听不到，所以监听iframe外的盒子变化）
iframe高度宽度自适应
weixin_30929011的博客
04-11 1026
iframe高度宽度自适应 iframe { width: 100%; height: 100%; border: none; position: inherit; } 网上全是js方法，而且略显臃肿，故找到了一个css方法，宽高100%，继承定位 posted on 201...
iframe在IE下出现进度条不完整的解决方法
求索
05-28 3003
我们在使用iframe加载页面的时候，一般是通过给iframe的src赋值来加载页面的，采用这种方式打开页面，正常情况下是不会有问题的，但是IE系列产品在使用这种方式加载iframe页面的时候，有一个bug存在，那就是进度条不能完全加载，而且在IE6下尤甚， 这种情况不是每次都会出现，而是存在一定的概率，当操作过于频繁或临界资源被抢夺时，便会产生。 解决方法有如下两种：
html调节iframe大小,调整动态iframe的大小(Chrome问题)
weixin_28687685的博客
06-08 1309
所以我一直在寻找所有其他Stack Overflow帖子以及谷歌周围如何在iFrame上自动设置高度/宽度.到目前为止,我已经完成了大约15-20个,但没有一个对我有效.让我试着解释一下我的情况：我正在我的页面上动态设置iFrame的主体.我需要iFrame相应地自动设置其高度和宽度,以便所有文本都可见.我需要这个在IE(7& 8),FireFox 3和Chrome中工作.以下是进入该问题...
Frame 根据嵌入页面自动调节大小
qq_33772013的博客
06-17 2133
很多人估计会遇到这样的情况，在IFrame嵌入某些页面，总会出现滚动条，那么有没方法，可以让IFrame随着嵌入页面的内容大小自动调节大小而不出现滚动条呢？答案是肯定的，经过查找，本人发现用IframeResizer脚本可以很好解决此问题，并且它是跨域名的，即使嵌入的是第三方页面，不需繁杂处理，几个步骤就可以使它自动调节宽度和高度。 1。首先下载iframe-resizer最新版本，现在是v2.5...
linux窗口的自适应问题,利用$(window).resize()实现窗口大小自适应宽度问题
weixin_32821695的博客
05-14 1177
© 版权声明：本文为博主原创文章，转载请注明出处问题描述：利用iframe做页面引入，用$(window).resize()作自适应；结果窗口变小时，利用$(window).width()获取到的宽度总是小于浏览器宽度，在左边留下17px宽度的白条。代码如下：// 自适应主页面大小$(window).resize(function () {initSize();}// 初始化主页面大小functi...
JavaScript（六）（浏览器模型/window对象/iframe）
qq_43456781的博客
07-27 2077
JavaScript（六）（浏览器模型/window对象） 文章目录JavaScript（六）（浏览器模型/window对象）八、浏览器模型54. 浏览器环境概述54.1 代码嵌入网页的方法54.1.1 script 元素嵌入代码54.1.2 script 元素加载外部脚本54.1.3 事件属性54.1.4 URL 协议54.2 script 元素==54.2.1 网页工作原理==54.2.2 defer 属性54.2.3 async 属性54.2.4 脚本的动态加载54.3 浏览器的组成54.3.1 渲染
WordPress后台发布新文章时HTML标签iframe会被自动过滤掉
qq_56428671的博客
03-30 371
网站用户在后台发布文章时候的，文章中嵌入的视频被过滤掉了，显示不出来，排查后，发现是因为WordPress程序的问题，在这里记录一下解决方法。 具体操作：在wp-includes文件夹下的kses.php中搜索$allowedposttags，这是个不过滤标签组成的数组，里面所列即是不过滤的标签集合，假如你发表文章时带有iframe标签。 <iframesrc=”#”width=”10″height=”10″frameborder=”0″allowfullscreen>&...
iframe 标签嵌入页面调整大小
qq1359236225的博客
12-08 783
使用iframe标签时遇到个问，iframe标签限制了被嵌入页面的比例大小，试了半天才解决问题。
html随着页面大小框架改变,html iframe自适应高度 可随着窗口大小改变|三体教程...
weixin_28948785的博客
06-08 2010
html iframe自适应高度 让浏览器兼容可随着窗口大小改变2017-10-12 21:36关于今天的“iframe自适应高度”这篇文章，小编很久以前就有写过，不过是发表在另外的网站上面。今天刚好又碰到这问题，把之前的都忘了，于是就又去百度搜索，没想到就找到了之前的文章。稍微改动一下内容，再分享出来，要不然百度会说是采集的了。在解决“iframe自适应高度”的问题之前，我们先说一下在其中遇到的...
后台使用iframe布局 出现非常复杂获取指定窗体解决办法(父窗体调用子窗体函数)...
fan7421436的专栏
05-11 161
也非常正常的使用的是iframe来进行布局的,在 index.html中有一个iframe引用了a.html页面,a.html页面中又使用了iframe进行了左右布局aLeft.html,bRight.html, 在bRight.html页面中点击某个按钮弹出了一个全局的窗口(由于使用的是一个jbox插件,在iframe中弹出时是一种局部的弹出,我们将它改成了全局的弹出),我想在弹出的窗口中获取...
最简单的方式让iframe根据内容显示高度即自适应高度
wangxiaojing123的专栏
05-21 714
semp/detail!showDetail.action?mssAddr=&tblid=&recid=&metadbid=" width="770"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" name="iframepage"  on
iframe自适应宽度和高度
mjs0309的专栏
09-06 967
  今天碰到个问题,iframe调为width:100%也还是出现了滚动条,现在将解决方法写下来供日后参照,也希望能帮助有需要的朋友 js代码:       function TuneHeight(fm_name,fm_id){               var frm=document.getElementById(fm_id);               var subW
【同域】根据iframe中引用的网页的高度来修改父级页面的iframe高度-iframe自适应子页高度
Love.Hope.Faith
12-20 6170
如题。         网上提供了很多方法。但是在进行测试的时候都会出现这样那样的问题。在一个好同学的帮助下，我使用了这种方法来实现了这个功能。         在父级页面iframe元素外部使用一个元素包围住。然后设置的初始高度不需要设置，设置好宽度，然后被包围的iframe的高度宽度均设置为100%；你也可以不用div，直接通过子页中的方法来修改父级页面iframe的高度。      
iframe自动撑开高度
热门推荐
qq_39917399的博客
08-07 1万+
<html> <head> <style> body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;overflow: hidden;} </style> </head> <body> <iframe src='" ht...
iframe自适应高度，多层嵌套iframe自适应高度的解决方法
wxljmy的专栏
03-06 1469
iframe自适应高度，多层嵌套iframe自适应高度的解决方法 在页面无刷新更新方面，虽然现在的ajax很强悍，但是处理代码相对多点。想比之下，iframe就简单多了！处理iframe的自适应宽、高，会经常用到，网上整理了一份，写在这里备用： 单个iframe 高度自适应： 起作用的是这句：onload="this.height=iFrame1.document.body.scro
iframe自动调节宽度
最新发布
07-04
IFrame（帧）是一种HTML元素，用于嵌入其他网页的内容到当前页面中。当内容的宽度未知或需要根据宿主页面动态调整大小时，你可以使用`iframe`的`width`属性和`height`属性设置为"100%"，让它们自适应容器的宽度。 例如： ```html <iframe src="https://www.example.com" width="100%" height="500px;" frameborder="0"></iframe> ``` 在这个例子中，`width="100%"`会使得`iframe`的宽度始终等于其父元素（通常是`div`, `section`等）的宽度，从而保证了内容随着父元素的宽度变化而自动调节。如果父元素没有固定的宽度，如响应式设计中的`body`或`container`，则`iframe`将填充整个可视区域。 如果你想在内容加载完成后动态获取内容的宽度并更新`iframe`，可以通过JavaScript操作`contentWindow`或`contentDocument`对象来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值