window和iframe相互获取

前几天遇到一个问题,需要从iframe中获取某个js对象,虽然解决了,但觉得还是要记录一下
本文参考了 Window对象与DOMjavascript window获取iframe、iframe获取window、document

关于document 和 frame的关系,见下图:

《window和iframe相互获取》

从上图可以看出:

(1)打开网页后,首先看到的是浏览器窗口,即顶层的window对象。

(2)其次,看到的是网页文档的内容,即document文档。而且我们知道HTML文档的层次结构可以被表示为一个树形结构。而这颗树可称为dom树,Document是探索DOM的入口。

通过window获取iframe

window.frames是个伪数组,可以通过window.frames[index]或window.frames[name]来获取iframe

window.frames[index],索引是从左往右,从上往下的,从0开始,通常我们使用window.frames[name]来获取frame

通过iframe获取window、document

如果想获取iframe里的window或者document,可以使用
iframe.contentWindow、iframe.contentDocument

iframe.contentDocument=iframe.contentWindow.document

contentWindow 兼容各个浏览器,可取得子窗口的 window 对象。

contentDocument Firefox 支持,不过iframe.contentDocument在IE8及以下的版本不支持。可取得子窗口的 document 对象。

浏览器对象的一些属性

Window对象
注:页面上元素name属性以及JavaScript引用的名称必须一致包括大小写

否则会提示你1个错误信息 "引用的元素为空或者不是对象"

对象属性(window.属性)

window //窗户自身, window=window.self 可使用全局属性 window访问 Window对象

document 对 Document 对象的只读引用。请参阅 Document 对象。

history 对 History 对象的只读引用。请参数 History 对象。

location 用于窗口或框架的 Location 对象。请参阅 Location 对象。

screen 对 Screen 对象的只读引用。请参数 Screen 对象。

navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。

defaultStatus 设置或返回窗口状态栏中的默认文本。

innerheight 返回窗口的文档显示区的高度。

innerwidth 返回窗口的文档显示区的宽度。

outerheight 返回窗口的外部高度。

outerwidth 返回窗口的外部宽度。

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

name 设置或返回窗口的名称。

parent 返回父窗口。

top 返回最顶层的先辈窗口。

status 设置窗口状态栏的文本。

window.location //URL地址,配备布置这个属性可以打开新的页面

 

对象方法(window.方法)

alert() 显示带有一段消息和一个确认按钮的警告框。

blur() 把键盘焦点从顶层窗口移开。

clearInterval() 取消由 setInterval() 设置的 timeout。

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

close() 关闭浏览器窗口。

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

createPopup() 创建一个 pop-up 窗口。

focus() 把键盘焦点给予一个窗口。

moveBy() 可相对窗口的当前坐标把它移动指定的像素。

moveTo() 把窗口的左上角移动到一个指定的坐标。

open() 打开一个新的浏览器窗口或查找一个已命名的窗口。

print() 打印当前窗口的内容。

prompt() 显示可提示用户输入的对话框。

resizeBy() 按照指定的像素调整窗口的大小。

resizeTo() 把窗口的大小调整到指定的宽度和高度。

scrollBy() 按照指定的像素值来滚动内容。

scrollTo() 把内容滚动到指定的坐标。

setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。

setTimeout(方法,秒数) 在指定的毫秒数后调用函数或计算表达式。 

定时器传参数

timeOutEvent = setTimeout("longPress('" + obj + "')",1500);

成员对象

window.event

window.document //见document对象详解

window.history

window.screen

window.navigator

window.external

 

window.history对象

window.history.length //浏览过的页面数

history.back() //在浏览历史里后退一步

history.forward() //在浏览历史里前进一步

history.go(i) //到汗青详细登记单的第i位//i>0进步,i<0撤退退却

window.screen对象

window.screen.width //屏幕宽度

window.screen.height //屏幕高度

window.screen.colorDepth //屏幕颜色深度

window.screen.availWidth //可用宽度(除去任务栏的高度)

window.screen.availHeight //可用高度(除去任务栏的高度)

window.external对象

window.external.AddFavorite("地址","标题" ) //把网站新增到保藏夹

window.navigator对象

window.navigator.appCodeName //浏览器代码名

window.navigator.appName //浏览器步伐名

window.navigator.appMinorVersion //浏览器补钉版本

window.navigator.cpuClass //cpu类型 x86

window.navigator.platform //操作体系类型 win32

window.navigator.plugins

window.navigator.opsProfile

window.navigator.userProfile

window.navigator.systemLanguage //客户体系语言 zh-cn简体中文

window.navigator.userLanguage //用户语言,同上

window.navigator.appVersion //浏览器版本(包括 体系版本)

window.navigator.userAgent

window.navigator.onLine //用户否在线

window.navigator.cookieEnabled //浏览器是否撑持cookie

window.navigator.mimeTypes

Document对象
注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写

否则会提示你一个错误信息 “引用的元素为空或者不是对象”

利用全局变量document可以访问Document对象

对象集合

all[] 提供对文档中所有 HTML 元素的访问。

anchors[] 返回对文档中所有 Anchor 对象的引用。

applets 返回对文档中所有 Applet 对象的引用。

forms[] 返回对文档中所有 Form 对象引用。

images[] 返回对文档中所有 Image 对象引用。

links[] 返回对文档中所有 Area 和 Link 对象引用。

对象属性

document.body//提供对 <body> 元素的直接访问。对于定义了框架集的文档,该属性引用最外层的 <frameset>。

document.cookie 返回与当前文档有关的所有 cookie。

document.title //返回文档标题等价于HTML的title标签

document.domain 返回当前文档的域名。

document.bgColor //返回页面背景色

document.fgColor //返回前景色(文本颜色)

document.linkColor //未点击过的链接颜色

document.alinkColor //激活链接(焦点在此链接上)的颜色

document.vlinkColor //已点击过的链接颜色

document.URL //设置URL属性从而在同一窗口打开另一网页

document.fileCreatedDate //文件建立日期,只读属性

document.fileModifiedDate //文件修改日期,只读属性

document.lastModified 返回文档被最后修改的日期和时间。

document.fileSize //文件大小,只读属性

document.cookie //设置和读出cookie

document.charset //返回字符集 简体中文:gb2312

document.URL 返回当前文档的 URL。

document.referrer 返回载入当前文档的文档的 URL。

document.styleSheets 返回样式表的集合,返回值CSSStyleSheet[]

document.styleSheets[0].cssRules.style.paddingTop=10px”设置样式,样式名去掉连字符,

常用对象方法

document.write() //动态向页面写入内容

document.writeln() 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。

document.createElement(<Tag>) //用指定标签类型创建一个新的element对象)

document.getElementById(ID) //获得指定ID值的对象

document.getElementsByName(Name) //获得指定Name值的对象

getElementsByTagName() 返回带有指定标签名的对象集合。

document.body.appendChild(oTag)

body-主体子对象

document.body //指定文档主体的开始和结束等价于body>/body>

document.body.bgColor //设置或获取对象后面的背景颜色

document.body.link //未点击过的链接颜色

document.body.alink //激活链接(焦点在此链接上)的颜色

document.body.vlink //已点击过的链接颜色

document.body.text //文本色

document.body.innerText //设置body>…/body>之间的文本

document.body.innerHTML //设置body>…/body>之间的HTML代码

document.body.topMargin //页面上边距

document.body.leftMargin //页面左边距

document.body.rightMargin //页面右边距

document.body.bottomMargin //页面下边距

document.body.background //背景图片

document.body.appendChild(oTag) //动态生成一个HTML对象

常用对象事件

document.body.onclick=func()//鼠标指针单击对象是触发

document.body.onmouseover=func()//鼠标指针移到对象时触发

document.body.onmouseout=func()//鼠标指针移出对象时触发

location-位置子对象

与window.location返回对象相同

document.location.hash // #号后的部分

document.location.host // 域名+端口号

document.location.hostname // 域名

document.location.href // 完整URL

document.location.pathname // 目录部分

document.location.port // 端口号

document.location.protocol // 网络协议(http:)

document.location.search // ?号后的部分

documeny.location.reload() //刷新网页

document.location.reload(URL) //打开新的网页

document.location.assign(URL) //打开新的网页

document.location.replace(URL) //打开新的网页

selection-选区子对象

document.selection

images集合(页面中的图象)

a)通过集合引用

document.images //对应页面上的img标签

document.images.length //对应页面上img标签的个数

document.images[0] //第1个img标签

document.images[i] //第i-1个img标签

b)通过nane属性直接引用

<img name=”oImage”/>

document.images.oImage //document.images.name属性

c)引用图片的src属性

document.images.oImage.src //document.images.name属性.src

d)创建一个图象

var oImage

oImage = new Image()

document.images.oImage.src=1.jpg”

同时在页面上建立一个img /标签与之对应就可以显示

forms集合(页面中的表单)

a)通过集合引用

document.forms //对应页面上的form标签

document.forms.length //对应页面上/formform标签的个数

document.forms[0] //第1个/formform标签

document.forms[i] //第i-1个/formform标签

document.forms[i].length //第i-1个/formform中的控件数

document.forms[i].elements[j] //第i-1个/formform中第j-1个控件

b)通过标签name属性直接引用

/formform name=”Myform”>input name=”myctrl”/>/form

document.Myform.myctrl //document.表单名.控件名

c)访问表单的属性

document.forms[i].name //对应form name>属性

document.forms[i].action //对应/formform action>属性

document.forms[i].encoding //对应/formform enctype>属性

document.forms[i].target //对应/formform target>属性

document.forms[i].appendChild(oTag) //动态插入一个控件

document.all.oDiv //引用图层oDiv

document.all.oDiv.style.display=//图层设置为可视

document.all.oDiv.style.display=”none” //图层设置为隐藏

document.getElementId(”oDiv”) //通过getElementId引用对象

document.getElementId(”oDiv”).style=”

document.getElementId(”oDiv”).display=”none”

/*document.all表示document中所有对象的集合 只有ie支持此属性,因此也用来判断浏览器的种类*/

图层对象的4个属性

document.getElementById(”ID”).innerText //动态输出文本

document.getElementById(”ID”).innerHTML //动态输出HTML

document.getElementById(”ID”).outerText //同innerText

document.getElementById(”ID”).outerHTML //同innerHTML

HTMLElement对象
HTML DOM 节点

在 HTML DOM (文档对象模型)中,每个部分都是节点:

1.文档本身是文档节点

2.所有 HTML 元素是元素节点

3.所有 HTML 属性是属性节点

4.HTML 元素内的文本是文本节点

5.注释是注释节点

Element 对象

在 HTML DOM 中,Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表,比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点

获取

document.getElementById(ID) //获得指定ID值的对象

document.getElementsByName(Name) //获得指定Name值的对象

getElementsByTagName() 返回带有指定标签名的对象集合。

属性和方法

方法里有a,b的参数仅仅是为了加深说明,其他元素没有a,b不代表是无参方法

Element.add(<class>)给元素添加指定的类

element.accessKey 设置或返回元素的快捷键。

element.appendChild() 向元素添加新的子节点,作为最后一个子节点。

element.attributes 返回元素属性的集合。

element.childNodes 返回元素子节点的 NodeList。

element.className 设置或返回元素的 class 属性。

element.clientHeight 返回元素的可见高度。

element.clientWidth 返回元素的可见宽度。

element.cloneNode() 克隆元素。

element.compareDocumentPosition() 比较两个元素的文档位置。

element.contentEditable 设置或返回元素的文本方向。

element.dir 设置或返回元素的文本方向。

element.firstChild 返回元素的首个子。

element.getAttribute() 返回元素节点的指定属性值。

element.getAttributeNode() 返回指定的属性节点。

element.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。

element.getFeature() 返回实现了指定特性的 API 的某个对象。

element.getUserData() 返回关联元素上键的对象。

Element.hidden获取或设置hidden属性的存在状态

element.hasAttribute() 如果元素拥有指定属性,则返回true,否则返回 false。

element.hasAttributes() 如果元素拥有属性,则返回 true,否则返回 false。

element.hasChildNodes() 如果元素拥有子节点,则返回 true,否则 false。

element.id 设置或返回元素的 id。

element.innerHTML 设置或返回元素的内容。

element.insertBefore(<a>,<b>) 在指定的已有的子节点之前插入新节点。A插到b前

element.isContentEditable 设置或返回元素的内容。

element.isDefaultNamespace() 如果指定的 namespaceURI 是默认的,则返回 true,否则返回 false。

element.isEqualNode(<a>) 检查a元素是否与当前元素相等。

element.isSameNode(a) 检查指定元素是否就是当前元素.

element.isSupported() 如果元素支持指定特性,则返回 true。

element.lang 设置或返回元素的语言代码。

element.lastChild 返回元素的最后一个子元素。

element.namespaceURI 返回元素的 namespace URI。

element.nextSibling 返回当前元素之后的兄弟元素

element.nodeName 返回元素的名称。

element.nodeType 返回元素的节点类型。

element.nodeValue 设置或返回元素值。

element.normalize() 合并元素中相邻的文本节点,并移除空的文本节点。

element.offsetHeight 返回元素的高度。

element.offsetWidth 返回元素的宽度。

element.offsetLeft 返回元素的水平偏移位置。

element.offsetParent 返回元素的偏移容器。

element.offsetTop 返回元素的垂直偏移位置。

element.ownerDocument 返回元素的根元素(文档对象)。

element.parentNode 返回元素的父节点。

element.previousSibling 返回当前元素之前的兄弟元素

Element.remove(<class>) 从元素移除指定的类

element.removeAttribute() 从元素中移除指定属性。

element.removeAttributeNode() 移除指定的属性节点,并返回被移除的节点。

element.removeChild(a) 从元素中移除子节点。

element.replaceChild(a,b) 替换元素中的子节点。

element.scrollHeight 返回元素的整体高度。

element.scrollLeft 返回元素左边缘与视图之间的距离。

element.scrollTop 返回元素上边缘与视图之间的距离。

element.scrollWidth 返回元素的整体宽度。

element.setAttribute() 把指定属性设置或更改为指定值。

element.setAttributeNode() 设置或更改指定属性节点。

element.setIdAttribute()

element.setIdAttributeNode()

element.setUserData() 把对象关联到元素上的键。

element.style 设置或返回元素的 style 属性。

Element.toggle(<class>)如果类不存在就添加它存在就移除它

element.tabIndex 设置或返回元素的 tab 键控制次序。

element.tagName 返回元素的标签名。

element.textContent 设置或返回节点及其后代的文本内容。

element.title 设置或返回元素的 title 属性。

element.toString() 把元素转换为字符串。

nodelist.item() 返回 NodeList 中位于指定下标的节点。

nodelist.length 返回 NodeList 中的节点数。
    原文作者:whp404
    原文地址: https://blog.csdn.net/whp404/article/details/91488339
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞