HTML iframe内联框架嵌套页面用法,在线编辑器

HTML iframe标签

HTML中的内联框架iframe可以用来为网页内嵌另一个网页。

<iframe src='url'></iframe>

iframe内容框架通过src属性引入被嵌入的网页,注意,站点之内的url链接应该不包括http:或https:,比如本站首页的src="//www.x1y1z1.com",鄙人试过了,如果加了https:或http:便无法链接。

下方的这个内联框架是本站python教程中的一个面向对象编程章节,因为自适应的设计,和宽度尺寸的缘故,内联框架中的页面已自适应成移动端的样式了,如下:


提示:如果使用内联框架嵌入站点之外的网页,可能会发生“连接请求被拒绝”的提示,这可能跟浏览器或其它站点的X-Frame-Option设置有关。


iframe内联框架高度和宽度的设置

iframe的高度和宽度的设置直接用height和width属性即可,注意,不是style中的height和width;

iframe内联框架实例代码及在线编辑器

<iframe src='//www.x1y1z1.com/python/python_index.html' width=100% height=100%></iframe>
<!-- 注意,这里的width和height的100%,是相对在线编辑器右侧输出栏这个父元素的尺寸大小,而不是整个网页的尺寸大小-->

iframe内联框架的边框属性设置

像上面的内联框架中,上下左右都有边框,要取消的话,可以将iframe的frameborder属性设置为0即可:

<iframe src='//www.x1y1z1.com/html/html_index.html' frameborder="0" width=100% height=100%></iframe>

iframe作为链接的目标

iframe作为链接的目标的显示效果就是当点击链接的时候,内联框架就可以显示链接所指向的网页,使用方法如下面的实例:

<iframe src='//www.x1y1z1.com/html/html_index.html' frameborder="0" width=100% height=90% name="if1"></iframe>
<a href='//www.x1y1z1.com/go/go_index.html' target='if1'>go语法</a>
<!-- 点击链接试一试 -->

代码解析

如上代码,iframe作为链接的目标的用法中,关键的是为iframe设置name属性,然后为链接的target属性添加指向name的值。



全栈前端 / HTML教程 :


















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.