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

`<iframe>`标签用于在当前 HTML 文档中嵌入另一个 HTML 文档,形成浮动框架。 ### 使用方法 - **基本使用**:使用`<iframe>`标签时,需要设置一些必要的属性。例如,设置宽度、高度嵌入网页的 URL。示例代码如下: ```html <iframe width="300px" height="300px" src="HTMLDome01.html" name="ff"></iframe> ``` 在这个例子中,`width`属性设置了框架的宽度为 300 像素,`height`属性设置了高度为 300 像素,`src`属性指定了要嵌入的网页的 URL 为`HTMLDome01.html`,`name`属性为内嵌窗口命名,可用于`<a>`、`<form>`、`<base>`的`target`属性,以确定显示的位置 [^1]。 - **设置框架大小自适应**:可以通过 JavaScript 实现`<iframe>`框架大小自适应。示例代码如下: ```html <span id="ospan"> <iframe frameborder=0 height=100% marginheight=1 marginwidth=1 src="right.asp?ID=1" width="569" bordercolor="#000000" name="I4" noresize scrolling=no onload="ospan.style.height=I4.document.body.scrollHeight;"></iframe> </span> ``` 在这个例子中,通过`onload`事件,当`<iframe>`加载完成后,将`<span>`元素的高度设置为`<iframe>`内容的实际高度,从而实现自适应 [^3]。 ### 特性 - **属性丰富**:`<iframe>`标签具有多个属性,可用于控制框架的显示行为。例如,`allowfullscreen`属性允许嵌入的网页全屏显示,但需要全屏 API 的支持;`frameborder`属性用于控制是否绘制边框,但建议在 CSS 里设置样式;`sandbox`属性可设置嵌入网页的权限;`importance`属性可设置浏览器下载嵌入网页的优先级;`referrerpolicy`属性可设置请求嵌入网页时 HTTP 请求的`Referer`字段 [^2]。 - **对象属性合**:`<iframe>`对象具有一些属性合,如`all`返回对象所包含的元素合的引用,`attributes`获取对象标签属性合,`behaviorUrns`返回标识附加到该元素行为的统一资源名称(URN)字符串的合等 [^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值