一、iframe语法
<iframe>标签用于在当前 HTML 文档中嵌入另一个文档或网页。它允许在同一个浏览器窗口中显示多个页面,并且可以在一个页面中显示来自不同源的内容。
iframe 语法:
<iframe src="URL"></iframe>
该URL指向不同的网页,将窗口内容显示为URL地址指向页面。
注意:由于安全原因,浏览器可能会限制通过<iframe>加载来自不同源(即不同域名、协议或端口)的内容,这是出于跨站点脚本攻击(XSS)的考虑。可以使用CSP(内容安全策略)或服务器端配置来控制允许加载的内容来源。
二、设置高度与宽度
<iframe>标签中的height和width属性用于定义内联框架(即嵌入的文档)的高度和宽度。
属性默认以像素为单位, 但是可以指定其按比例显示 (如:”80%”):
<iframe src="demo_iframe.htm" width="80%" height="80%"></iframe>
三、移除边框
要为<iframe>设置边框,可以使用以下CSS属性:
<iframe src="https://www.example.com" style="border: 1px solid black;"></iframe>
在上述示例中,我们将style属性添加到<iframe>标签中,并使用CSS的border属性来定义边框的样式。1px表示边框的宽度,solid表示边框的样式为实线,black表示边框的颜色为黑色。
四、显示目录链接页面
iframe可以显示一个目标链接的页面,目标链接的属性必须使用iframe的属性。
示例代码:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3cschool.cn" rel="external nofollow" target="iframe_a">W3CSCHOOL.CN</a></p>
五、iframe标准属性
1、class:规定元素的类名(classname);
2、id:规定元素的唯一 id;
3、style:规定元素的行内样式(inline style);
4、title:规定元素的额外信息(可在工具提示中显示)。
六、frameset属性
注意:<frameset>标签不支持在 HTML5应用。
<frameset>标签用于在一个页面中设置一个或多个框架,并且应该代替<body>标签。<frameset>标签定义页面中的框架布局,而<frame>标签则用于定义每个框架的内容。
<frameset> 语法:
<frameset> <frame src="menu.html"> <frame src="content.html"> </frameset>
- frameset:建立框架的标记,将在其中定义各个框架;
- frame src:指示框架显示内容URL地址。
七、frameset行列比例
在 <frameset> 标签中,我们可以使用 rows 和 cols 属性来设置行和列所占页面的百分比或固定像素值。rows 属性用于定义行的高度,每个值用逗号分隔。
示例代码:
<frameset rows="20%,*"> <frame src="title.html"> <frameset cols="30%,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </frameset>
- frameset cols:确定每个框架列所占百分比。在前面的示例中,我们已经确定第一框架将占据所示区域的 30%,并且我们使用“*”符号来指示剩余百分比;
- frameset rows: 确定将显示的每个框架行所占百分比。在前面的示例中,我们选择第一框架为 20%,剩下的剩余空间将在menu.html和content.html之间划分。
八、frameset设置边框
<frameset>标签中确实可以使用frameborder和framespacing属性来控制框架的边框和间距。
示例代码:
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*"> <frame src="title.html"> <frameset border="0" frameborder="0" framespacing="0" cols="30%,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </frameset>
- frameborder:设置边框, 0 值表示没有边框;
- border:修改边框的粗细(由 Netscape 浏览器使用);
- framespacing:修改边框的粗细(由 Internet Explorer 浏览器使用)。
九、frame设置滚动
<frame>标签中可以使用noresize和scrolling属性来控制框架大小和滚动条的显示。
示例代码:
<frameset border="2" frameborder="1" framespacing="2" rows="20%,*"> <frame src="title.html" noresize scrolling="no"> <frameset border="4" frameborder="1" framespacing="4" cols="30%,*"> <frame src="menu.html" scrolling="auto" noresize> <frame src="content.html" scrolling="yes" noresize> </frameset> </frameset>
- noresize:不允许用户更改其尺寸;
- scrolling:设置滚动条是否显示。