javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,
javascript获取iframe框架中,加载的页面document对象
因为浏览器安全限制,对跨域访问的页面,其document对象无法读取、设置属性
function getDocument(iframe)
{
var Doc;
try{
Doc = iframe.contentWindow.document;// For IE5.5 and IE6
}
catch(ex){}
if(!Doc)
{
Doc = iframe.contentDocument;// For NS6
}
return Doc;
}
用iframe嵌套页面是,如果父页面要获取子页面里面的内容,可以使用contentWindow或者contentDocument,其区别如下:
a>contentWindow 这是个只读属性,返回指定的iframe的窗口对象。它虽然不是标准的一部分,但各个主流浏览器都支持。
b>contentDocument Firefox 支持,IE6,IE7都不支持,IE8开始支持,需要如此访问 document.frames['J_mainframe'].document。
兼容获取document对象:
var getIFrameDoc = function(){
var iobj = document.createElement("iframe");
document.getElementsByTagName("body")[0].appendChild(iobj);
return iobj.contentDocument || iobj.contentWindow.document;
}
iframe的使用小贴士
时间:2014-07-25 13:53:21 阅读:4639 评论:0 收藏:0 [点我收藏+]
标签:style blog http color 使用 strong io width
1.之前又说到“根据内容计算iframe的高度”
2.现在想说的是,一般iframe页面都是嵌套在父页面当中,所以在一般在iframe里面做相关动作时默认都是iframe页面的,不会影响到父页面。因此若是需要在iframe的子页面里面操作父页面的元素,我们会如何做?
iframe 子页面操作父页面元素需要知道的两点是:
(1)iframe 子页面和父页面必须属于同一个域下。(这个问题,一般在本地页面来做到,是不太可能的,经常会有这个错误出现 “Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.”,故而一般的解决方案是放在服务器上去访问。 )
(2)iframe 页面获取父页面的对象方法是 parent。
例如:iframe 子页面获取父页面的id为mask的对象:$("#mask",parent.document)
$("#mask",parent.document).html() --------- id=mask的html内容
同理可以找到其他类型的对象
其次,就是父页面获取iframe子页面中的对象:$(window.frames["framename"].document).find("#id")
例如:$(window.frames["mainframe"].document).find("#mask2"); 中括号中的是iframe的名字,find后面则是对象的id。
详见链接:http://blog.csdn.net/zalion/article/details/5894103
3.使用iframe时,如何正确使用,一般使用iframe时,也是会有需要通过a标签切换的
例如:
<ul class="nav nav-list">
<li class="active parent_li"><a href="BSwelcome.aspx" target="mainframe"></li>
<li class="parent_li"><a href="MyContacts/MyInfoAssitant/BSMyInfoList.aspx?jb_id=&grade=all&&paixu=no®s=dd&cup=1" target="mainframe"></a></li>
<li class="parent_li"><a href="MyContacts/MyOrder/BSMyOrderList.aspx?cup=1&&sel=no" target="mainframe"></a></li>
<li class="parent_li"><a href="MyContacts/SubmitOrder/BSSubmitOrderList.aspx?cup=1" target="mainframe"></a></li>
</ul>
<iframe id="ifrma1" src="BSwelcome.aspx" name="mainframe" frameborder="no" scrolling="yes"
style="width: 100%; height: 100%;"></iframe>
一般iframe要有id值,name值,而a标签链接了地址,还要多一句 target="mainframe" 而mainframe就是iframe的name值。才不至于点击a标签直接跳过去。
标签:style blog http color 使用 strong io width
javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,的更多相关文章
- 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...
- javascript_获取iframe框架中元素节点的属性值
1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口 ...
- 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...
- 使用 JavaScript 中的 document 对象查找 HTML 元素,实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时,按钮高亮显示;
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象查找 HTML 元素,实现"登录"按钮的高亮特效 鼠标悬浮于"登录" ...
- 怎样获取不同环境下的document对象
1. 在一般的网页文档中, 可通过: document 或 window.document 获取; 2. 在iframe框架中, 可通过iframe节点的属性: contentDocument 获取; ...
- (转载)OC学习篇之---Foundation框架中的NSString对象和NSMutableString对象
在之前的一篇文章中我们说到了Foundation框架中的NSObject对象,那么今天在在来继续看一下Foundation框架中的常用对象:NSString和NSMutableString. 在OC中 ...
- (转载)OC学习篇之---Foundation框架中的NSObject对象
前一篇文章讲到了OC中的代理模式,而且前几篇文章就介绍了OC中的类相关知识,从这篇文章开始我们开始介绍Foundation框架. OC中的Foundation框架是系统提供了,他就相当于是系统的一套a ...
- 在iframe框架中全屏不好使的原因
遇到的问题:我是在iframe框架中添加了一个插件在360和火狐中不好使,将allowfullscreen="true" 属性配置好就没问题了: 可能出现的原因:将allowful ...
- Foundation框架中的NSNumber对象详解
到目前为止,我们所讨论过的所有数字数据类型,如int型.float型和long型都是Objective-C语言中的基本数据类型,也就是说,它们都不是对象.例如,不能向它们发送消息.然而,有时需要作为对 ...
随机推荐
- MDK的一些设置(尤其是部分代码无法断点问题的解决)
转自http://www.cnblogs.com/worldsing/p/3412323.html
- miniui设置边框的方法
if (field == "loginname") { if (record._id == 2) { e.cellHtml = ""; e.cellStyle ...
- C/C++ http协议加载sessionID
很多时候,使用一个既定的API虽然可以去完成一些任务,但是还是不如自己写来的那么随性和自由. http协议,最常用的get,post两种方式传输数据,关于post,有时候,需要用到加载cookie信息 ...
- linux文件复制与权限赋值
文件file内容赋值到file2中 1. cp file1 file2 2. cat file1 > file2 3. cat < file1 > file2 4. dd if= ...
- linux 下mysql的安装,并设置必要的密码
首先,我使用的是redhat linux ,版本号为: [root@localhost init.d]# cat /proc/version Linux version - (bhcompile@po ...
- python无意中发现的
http://www.zhihu.com/question/37904398?sort=created&page=2 >>> a = [[1,2],[3,4],[5,6,7] ...
- 使用 Hive 作为 ETL 或 ELT 工具
用来处理数据的 ETL 和 ELT 工具的概述 数据集成和数据管理技术已存在很长一段时间.提取.转换和加载(ETL)数据的工具已经改变了传统的数据库和数据仓库.现在,内存中转换 ETL 工具使得提取. ...
- MySQL 主从热备份(读写分离)
MySQL的主从备份,听个名词很高大上,其实都是MySQL原本就实现的了,你只需要简单配置一下就可以实现. 第一步:保持主从两个数据库是同步的,最好事先手动同步一下: 第二步:停止两个数据库,分别更改 ...
- Python、PIP环境变量的配置
Python安装的路径:D:\Python35 pip的环境变量 Python和pip的PATH: PIP下载链接:https://pypi.python.org/pypi/pip 随意解压好,然后C ...
- 1095: [ZJOI2007]Hide 捉迷藏
题意:给定一棵树,每个节点可以变成黑白两色.一开始所有节点都是黑色,操作可将点颜色改变,询问当前情况下距离最远的两个黑点的距离. 动态树分治.一开始想的是对于每个节点维护主大和次大,后来发现这实在是太 ...