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的值。