iframe标签(属性介绍(sandbox、srcdoc、scrolling)、iframe对象、onload事件、父集获取iframe内节点(同源和不同源情况)、domain修改规则和示例)

本文详细解读iframe标签的属性用法,包括align、fameborder、srcdoc等,并探讨同源与跨域获取节点策略,iframe的优点与限制,以及X-Frame-Options设置。深入讲解document.domain和window.postMessage在处理iframe中的作用。

目录

iframe标签

属性简要汇总

部分属性详细介绍 

align

fameborder

height|width

marginheight|width

name

sandbox 

scrolling

srcdoc

iframe对象

属性汇总

onload事件

父集获取iframe内节点

同源情况(域名和端口号相同)

不同源(父子域名、端口号相同)

不同源(万能)

iframe优缺点和应用场景、设置网页是否能作为iframe(X-Frame-Options)、点击劫持

document.domain修改规则实例

window.postMessage使用详解


iframe标签

该标签规定一个内联框架。被用来在当前 HTML 文档中嵌入另一个文档。

可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对不支持 <iframe> 的浏览器。

属性简要汇总

属性 描述
align left|right|top|middle|bottom

规定如何根据周围的元素来对齐 <iframe>。

frameborder 1|0 规定是否显示 <iframe> 周围的边框。
height|width pixels 规定 <iframe> 的宽高。
longdesc URL HTML5 不支持。规定一个页面,该页面包含了有关 <iframe> 的较长描述。
marginheight|width pixels HTML5 不支持。规定 <iframe> 的顶部和底部的边距。
name name 规定 <iframe> 的名称。
sandbox ""|allow-forms|allow-same-origin|allow-scripts|allow-top-navigation 对 <iframe> 的内容定义一系列额外的限制。
scrolling yes|no|auto 规定是否在 <iframe> 中显示滚动条。
seamless seamless 规定 <iframe> 看起来像是父文档中的一部分。
src URL 规定在 <iframe> 中显示的文档的 URL。
srcdoc HTML_code 规定页面中的 HTML 内容显示在 <iframe> 中。

部分属性详细介绍 

align

<iframe> 元素是内联元素(不会在页面上插入新行),这意味着文本和其他元素可以围绕在其周围。

取值:left|right|top|middle|bottom

left、right效果可以理解iframe标签为float元素,top(默认值)、middle、bottom分别为顶部与其它元素顶部对齐、中间对齐、底部和其它元素底部对齐

示例

fameborder

规定<iframe

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值