所在的位置: html >> html市场 >> HTML页面中嵌入网页

HTML页面中嵌入网页

北京中科医院几级 http://m.39.net/pf/bdfyy/zjft/

iframe元素用于向网页嵌入一个网页资源。出于安全的考虑,iframe仅用来展示被嵌入资源的内容,相当于被嵌入资源的所有内容被放入一个单独的沙盒中,所以,iframe也被称作沙盒。如:

iframesrc="img.html"width=""height=""scrolling="auto"frameborder="1"

其中,src属性指示iframe的URL,可以是相对地址,也可以是绝对地址;width和height属性分别指示iframe的宽度和高度,单位为px;scrolling属性指示当被嵌入资源的尺寸超过iframe的尺寸时,是否添加滚动条,取值auto

yes

no,auto表示自动调整,需要时添加,yes表示始终有滚动条,no表示始终无滚动条;frameborder是否显示iframe边框,取值0

1,默认值为1,0不显示,1显示。运行结果如图所示:

图嵌入网页

可以看出,浏览器为该iframe渲染了边框。并且,被嵌入资源的尺寸超过iframe的尺寸,浏览器在页面上自动添加了滚动条。

此外,iframe还有srcdoc和sandbox两个非常重要的属性需要说明。

srcdoc属性

srcdoc属性表示在iframe中显示的内容,是一段文本,浏览器会把它解析为一段HTML代码。

如果浏览器支持srcdoc属性,则会覆盖在src属性中规定的内容,相当于src属性失效;如果浏览器不支持srcdoc属性,则相应地会显示在src属性中规定的文件内容。

iframesrc="img.html"srcdoc="styleTable{width:px;border-collapse:collapse;border:2pxsolid#;}th,td{border:solidthin;height:1.4em;width:1.4em;text-align:center;}/styleTabletrthth/ththth/th/trtrtdtd/tdtdtd/td/trtrtdtd/tdtdtd/td/tr/Table"/iframe

运行结果如图所示:

图srcdoc属性

上面的代码中,我们把表格和表格的CSS代码一起放到srcdoc属性中。从运行结果可以看出,在支持srcdoc的浏览器中,src属性失效,iframe中渲染出一个HTML表格。

sandbox属性

sandbox属性规定iframe的安全规则,它会启用一系列对iframe中内容的额外限制,防止不信任的Web页面执行某些操作。

sandbox属性的取值有allow-forms(允许在沙盒中提交表单)、(allow-pointer-lock允许在沙盒中锁定鼠标)、allow-popups(允许在沙盒中弹出窗口)、allow-same-origin(允许把沙盒内容作为普通来源对待)、allow-scripts(允许在沙盒中执行JavaScript脚本)、allow-top-navigation(允许在沙盒中将内容变更为最顶层的窗口)。

如果sandbox属性的值为空,如:iframesrc="


转载请注明:http://www.aierlanlan.com/rzdk/1881.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了