Iframe使用小点

了解iframe

今天帮朋友做一个看似简单的页面之间跳转判断问题,实际上却花费了我将近一个小时的时间才解决,最后还是选择用ifrmae的黑魔法完成。

iframe表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中。在HTML 4.01中,文档可能包含头部和正文,或头部和框架集,但不能包含正文和框架集。但是,iframe可以在正常的文档主体中使用。每个浏览上下文都有自己的会话历史记录和活动文档。包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览上下文(没有父级)通常是浏览器窗口。

属性:

首先该元素包含全局属性

frameborder HTML 4 only
取值为1时(默认值),告诉浏览器在当前iframe与其他iframe之间绘制边框,取0时则无需绘制此边框。
height
以CSS像素格式HTML5,或像素格式HTML 4.01,或百分比格式指定frame的高度。

longdesc HTML 4 only
指向frame详细描述的URI(统一资源标识符),因为广泛乱用,该属性在非视觉浏览器中没什么作用。

marginheight HTML 4 only
框架内容到框架的上下边距,以像素格式表示。

marginwidth HTML 4 only
框架内容到框架的左右边距,以像素格式表示。
name
嵌入的浏览上下文(框架)的名称。该名称可以用作’a’标签,’form’标签的target属性值,或’input’标签和’button’标签的formtaget属性值。

sandbox HTML5 only
如果指定了空字符串,该属性对呈现在iframe框架中的内容启用一些额外的限制条件。属性值可以是用空格分隔的一系列指定的字符串。

seamless HTML5 only
该布尔属性指示浏览器将iframe渲染成容器页面文档的一部分。例如,通过打被包含的文档的链接,在iframe页面的样式被渲染之前,父页面的CSS样式就可以应用在iframe中(除非被其他设置阻止)。

src
嵌套页面的URL地址。使用遵守同源策略的 ‘about:blank’ 来嵌套空白页。

srcdoc HTML5 only
该属性值可以是HTML代码,这些代码会被渲染到iframe中,如果同时指定了src属性,srcdoc会覆盖src所指向的页面。该属性最好能与sandbox和seamless属性一起使用。

width
以CSS像素格式HTML5,或以像素格式HTML 4.01,或以百分比格式指定frame的宽度。

如何在页面中iframe中的元素对象

内联的框架,就像 ‘frame’ 元素一样,会加入 window.frames 伪数组中。

通过contentWindow属性,脚本可以访问iframe元素所包含的HTML页面的window对象。contentDocument属性则引用了iframe中的文档元素(等同于使用contentWindow.document),但IE8-不支持。

脚本试图访问的框架内容必须遵守同源策略,并且无法访问非同源的window对象的几乎所有属性。同源策略同样适用于子窗体访问父窗体的window对象。跨域通信可以通过window.postMessage来实现。

基本使用示例:

1
var iframeInsideNode = window.frames["iframe中name的值"].document.getElementById("ifrmae中元素的Id")

×

可以的话,我想喝杯咖啡续命

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 了解iframe
    1. 1.1. 属性:
  2. 2. 如何在页面中iframe中的元素对象