在HTML5中，不再推荐使用浮动框架（iframes）来嵌入其他页面或内容，因为它们可能引起一些用户体验和可访问性问题

原创已于 2024-04-12 18:35:01 修改 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #js #web

于 2020-06-29 08:27:50 首次发布

Job(a good job programmer) 同时被 3 个专栏收录

2370 篇文章

订阅专栏

HTML5(HyperText Markup)

305 篇文章

订阅专栏

CSS(Cascading Style Sheets)

231 篇文章

订阅专栏

本文探讨了HTML5中iframe的使用方法及其潜在问题，包括安全性、性能和可访问性。同时介绍了现代Web开发中iframe的替代技术，如AJAX、Web Components等。

在HTML5中，不再推荐使用浮动框架（iframes）来嵌入其他页面或内容，因为它们可能引起一些用户体验和可访问性问题。然而，如果你确实需要使用iframe，你可以按照以下方式创建：

html

创建浮动框架在这个例子中，标签被用来创建一个浮动框架，其中 src 属性指定了要嵌入的页面的URL。 title 属性为iframe提供了一个描述性标题，这在iframe内容不可用时对用户和辅助技术（如屏幕阅读器）来说非常有用。 width 和 height 属性分别设置iframe的宽度和高度。

尽管

在某些情况下仍然被使用，比如嵌入第三方内容或跨域通信，但现代web开发更倾向于使用其他技术来替代iframe，比如：

AJAX：用于异步加载和更新网页的部分内容，而不需要重新加载整个页面。
嵌入资源：通过, , , , 等标签嵌入媒体和其他资源。
Web Components：允许你创建可重用的自定义元素——具有封装功能和封装标记的DOM元素。
iframe的替代方案：如使用

元素配合CSS样式和JavaScript来实现类似iframe的效果，但这种方法通常更复杂，且可能不如iframe直接有效。
在使用iframe时，你还需要注意以下几点：

安全性：iframe可以加载任何URL的内容，包括可能包含恶意脚本的页面。确保你信任iframe中加载的内容，并考虑使用内容安全策略（CSP）来限制iframe可以加载的内容类型。
性能：iframe加载的内容是独立于主页面的，这可能导致额外的HTTP请求和加载时间。
可访问性：iframe可能导致屏幕阅读器等辅助技术无法正确解释页面内容。确保iframe有适当的标题，并且其内容对所有人都是可访问的。
因此，在决定使用iframe之前，最好先考虑是否有其他更适合你需求的解决方案。

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

 	<html>
 	<head>
 	<title>创建浮动框架</title>
 	</head>
 	<body>
 	<a href="11-1  横向分割窗口.html" target="three">横向</a>
 	<a href="11-2  纵向分割窗口.html" target="three">纵向</a>
 	<a href="11-3  框架的嵌套.html" target="three">框架</a>
 	<p>
 	<iframe width="800" height="400" 
 	   frameborder=0 scrolling="auto"
 	   align="center" name="three">
 	</body>
 	</html>

 	<html >
 	<head>
 	<title>横向分割窗口</title>
 	</head>
 	
 	<frameset rows="40%,40%,*" >
 	<frame ></frame >
 	<frame ></frame >
        <frame ></frame >
 	</frameset>
 	</html>>

 	<html >
 	<head>
 	<title>纵向分割窗口</title>
 	</head>
 	
 	<frameset cols="20%,40%,*" >
 	<frame ></frame >
 	<frame ></frame >
        <frame ></frame >
 	</frameset>
 	</html>>

 	<html >
 	<head>
        <title>纵向分割窗口</title>
 	</head>
 		
 	<frameset cols="25%,*%">
        <frame>
 	<frameset rows="40%,*%">
 	<frame>
 	<frame>
 	</frameset>
        </frameset>
 	</html>>