XHTML 框架和内联框架

2025年2月14日 | 5 分钟阅读

XHTML使用框架和内联框架（IFrames）在一个浏览器窗口中显示多个HTML文档。这些在很多应用中都很有用，从导航菜单到嵌入内容，再到网页不同部分的分割。现在，让我们更深入地了解XHTML中的框架和内联框架概念，了解它们的用法、优点、缺点以及最佳实践。

帧

框架允许将单个浏览器窗口分成一组完全独立的部分，每个部分都可以呈现自己的HTML文档。这种方法在网页开发的早期非常常见，但由于它带来的许多问题，例如与可用性、可访问性和搜索引擎优化相关的问题，现在不太受欢迎。然而，在需要维护或升级旧页面时，了解框架是有用的。

基本框架结构

框架是使用 <frameset> 元素定义的，该元素替换了HTML文档中的普通 <body> 标签。一个 <frameset> 元素本身包含多个 <frame> 元素，这些元素描述了要显示的独立文档。

简单框架集示例

这是一个简单的框架集示例。它会将浏览器窗口分成两列。

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Basic Frameset Example</title>
</head>
<frameset cols="50%,50%">
    <frame src="frame1.html" />
    <frame src="frame2.html" />
</frameset>
</html>   

在此示例中，浏览器窗口被分成两个宽度相等的框架，一个包含标题为 frame1.html 的文档，另一个包含标题为 frame2.html 的文档。

<frameset> 元素的属性

cols 和 rows： 从上面的示例可以看出，cols 属性指定你想要有多少列，并相应地安排宽度。它采用与你给表格列宽相同的值：百分比（例如 50%）、像素值（例如 300px）或星号 (*) 表示大小的灵活性（例如 70% *）。

<frame> 元素的属性

src： 要在框架内显示的文档的URL。
name： 可用于定位不同链接的目标名称。
scrolling： 'yes'、'no' 或 'auto' 的值决定了框架是否应该有滚动条。
noresize： 如果 'noresize' 的值为 'noresize' 本身，则用户将无法调整框架的大小。
frameborder： '1' 或 '0' 的值决定了是否显示框架边框。

带有行和列的框架集示例

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Complex Frameset Example</title>
</head>
<frameset rows="50%,50%">
    <frameset cols="70%,30%">
        <frame src="frame1.html" />
        <frame src="frame2.html" />
    </frameset>
    <frame src="frame3.html" />
</frameset>
</html>   

此示例显示了一个分为两行的浏览器窗口，其中一行又分为两列。

框架的优点和缺点

优点

易于导航： 允许设计者拥有静态的导航栏，因此在页面的其余部分更改时始终可见。
资源共享： 使用框架允许多个页面共享公共资源（如导航菜单），而无需复制它们。

缺点

可访问性问题： 它使某些屏幕阅读器和其他辅助技术无法访问内容。
搜索引擎优化： 搜索引擎可能难以索引框架内的内容。
书签和链接： 用户无法为框架添加书签；链接到特定框架不起作用。

内联框架 (IFrames)

内联框架只是用于将另一个HTML文档嵌入到当前文档中。与框架不同，内联框架嵌入在HTML文档的正文中，使其在本质上更灵活。此外，内联框架已广泛应用于现代Web开发中。

基本内联框架结构

内联框架使用 <iframe> 标签创建。由于它是实际文档正文的一部分，因此你可以以简洁、不引人注目的方式呈现外部来源。

简单内联框架的示例

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Basic IFrame Example</title>
</head>
<body>
    <h1>Main Page</h1>
    <iframe src="iframe-content.html" width="600" height="400"></iframe>
</body>
</html>   

此示例使用内联框架将 iframe-content.html 的内容插入到主文档中。

<iframe> 元素的属性

src： 指定将在内联框架中显示的文档的URL。
width 和 height： 定义内联框架的尺寸。
name： 为内联框架指定一个名称，该名称可用于定位链接。
scrolling： 控制在内联框架中显示滚动条；它可以是 yes、no 或 auto。
frameborder： 这会打开/关闭内联框架边框。 0表示没有边框； 1表示有边框。
allow： 内联框架有权使用的一些功能的列表。这可能包括允许内联框架使用全屏或自动播放。
sandbox： 一种提供安全性的高级方法，允许限制内联框架内的内容可以采取的操作。

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Advanced IFrame Example</title>
</head>
<body>
    <h1>Main Page</h1>
    <iframe src="iframe-content.html" width="600" height="400" frameborder="0" scrolling="auto"></iframe>
</body>
</html>   

这个内联框架没有边框，并且默认情况下，它将滚动条行为指定为自动。

使用内联框架的优点

嵌入外部内容： 内联框架非常适合来自任何其他来源的内容。一个很好的例子是嵌入来自其他域的视频、地图，甚至是社交媒体订阅源。
环境隔离： 内联框架中包含的内容独立于主文档运行。这可能是一个很好的安全措施，甚至有助于避免冲突。
性能问题： 由于多个内联框架，下载时间可能会增加，尤其是在它们从不同来源提取内容的情况下。
可访问性： 就像传统的框架一样，内联框架可能会给屏幕阅读器和其他适配的浏览器带来一些可访问性问题。
安全风险： 除非经过适当的加固，否则内联框架本身可能会被用于劫持。

使用框架和内联框架时要应用的Best Practices

避免过度使用框架
尽管框架在某些方面可能很有用，但过度使用框架会导致不良的用户体验。框架可能会使导航复杂化，搜索引擎索引存在许多问题，甚至可访问性也存在问题。
内联框架嵌入外部内容
内联框架在将第三方内容（例如视频、地图或社交媒体源）嵌入到网站中时提供了更大的灵活性。它们允许无缝集成，而无需更改主文档的结构。
框架和内联框架中的可访问性
在使用框架或内联框架时，请确保每个用户都可以访问你的内容。所有框架和内联框架都必须具有描述性名称，以便告知用户其中包含的内容。通过 title 属性提供有关其用途的更多描述。
安全注意事项
内联框架也可能带来一些自身的安全威胁，例如点击劫持。将沙盒属性应用于内联框架以限制嵌入式内容允许执行的操作。

带有沙盒属性的内联框架的示例

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sandboxed IFrame Example</title>
</head>
<body>
    <h1>Main Page</h1>
    <iframe src="iframe-content.html" width="600" height="400" sandbox="allow-scripts allow-same-origin"></iframe>
</body>
</html>   

以下示例演示了一个沙盒化的内联框架，仅运行脚本并访问同源内容。

下一个主题内容管理系统中的Xhtml

XHTML 框架和内联框架

帧

基本框架结构

<frameset> 元素的属性

<frame> 元素的属性

带有行和列的框架集示例

框架的优点和缺点

内联框架 (IFrames)

基本内联框架结构

<iframe> 元素的属性

使用内联框架的优点

使用框架和内联框架时要应用的Best Practices

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

XHTML 教程

面试题

其他

XHTML 框架和内联框架

帧

基本框架结构

<frameset> 元素的属性

<frame> 元素的属性

带有行和列的框架集示例

框架的优点和缺点

内联框架 (IFrames)

基本内联框架结构

<iframe> 元素的属性

使用内联框架的优点

使用框架和内联框架时要应用的Best Practices

相关帖子

XHTML 字符编码

XHTML 元素

XHTML 和微格式

XHTML 在内容管理系统 (CMS) 中的应用

XHTML 表格

XHTML 模块化

XHTML 内联元素

XHTML MIME 类型

XHTML 链接和导航

XHTML 脚本

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器