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对象:

  1. var getIFrameDoc = function(){
  2. var iobj = document.createElement("iframe");
  3. document.getElementsByTagName("body")[0].appendChild(iobj);
  4. return iobj.contentDocument || iobj.contentWindow.document;
  5. }

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标签切换的

例如:

  1. <ul class="nav nav-list">
  2. <li class="active parent_li"><a href="BSwelcome.aspx" target="mainframe"></li>
  3. <li class="parent_li"><a href="MyContacts/MyInfoAssitant/BSMyInfoList.aspx?jb_id=&grade=all&&paixu=no&regs=dd&cup=1" target="mainframe"></a></li>
  4. <li class="parent_li"><a href="MyContacts/MyOrder/BSMyOrderList.aspx?cup=1&&sel=no" target="mainframe"></a></li>
  5. <li class="parent_li"><a href="MyContacts/SubmitOrder/BSSubmitOrderList.aspx?cup=1" target="mainframe"></a></li>
  6. </ul>
  1. <iframe id="ifrma1" src="BSwelcome.aspx" name="mainframe" frameborder="no" scrolling="yes"
  2. style="width: 100%; height: 100%;"></iframe>

一般iframe要有id值,name值,而a标签链接了地址,还要多一句 target="mainframe"  而mainframe就是iframe的name值。才不至于点击a标签直接跳过去。

iframe的使用小贴士,布布扣,bubuko.com

iframe的使用小贴士

标签:style blog http color 使用 strong io width

javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,的更多相关文章

  1. 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...

  2. javascript_获取iframe框架中元素节点的属性值

    1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口 ...

  3. 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小

    查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...

  4. 使用 JavaScript 中的 document 对象查找 HTML 元素,实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时,按钮高亮显示;

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象查找 HTML 元素,实现"登录"按钮的高亮特效 鼠标悬浮于"登录" ...

  5. 怎样获取不同环境下的document对象

    1. 在一般的网页文档中, 可通过: document 或 window.document 获取; 2. 在iframe框架中, 可通过iframe节点的属性: contentDocument 获取; ...

  6. (转载)OC学习篇之---Foundation框架中的NSString对象和NSMutableString对象

    在之前的一篇文章中我们说到了Foundation框架中的NSObject对象,那么今天在在来继续看一下Foundation框架中的常用对象:NSString和NSMutableString. 在OC中 ...

  7. (转载)OC学习篇之---Foundation框架中的NSObject对象

    前一篇文章讲到了OC中的代理模式,而且前几篇文章就介绍了OC中的类相关知识,从这篇文章开始我们开始介绍Foundation框架. OC中的Foundation框架是系统提供了,他就相当于是系统的一套a ...

  8. 在iframe框架中全屏不好使的原因

    遇到的问题:我是在iframe框架中添加了一个插件在360和火狐中不好使,将allowfullscreen="true" 属性配置好就没问题了: 可能出现的原因:将allowful ...

  9. Foundation框架中的NSNumber对象详解

    到目前为止,我们所讨论过的所有数字数据类型,如int型.float型和long型都是Objective-C语言中的基本数据类型,也就是说,它们都不是对象.例如,不能向它们发送消息.然而,有时需要作为对 ...

随机推荐

  1. eclipse中新建jni工程

    1.什么是NDK 网上很多不多说,全称是Android Native Developer Kit,是一个工具合集,我理解可以把c/c++打包成.so文件 这是目录结构,要用到指令ndk-build 需 ...

  2. Mybatis 批量insert

    @Override public int insertHouseTypeScene(int htid, String name, String icon,int sort, List<House ...

  3. Linux 磁盘管理

    Linux磁盘管理好坏管理直接关系到整个系统的性能问题. Linux磁盘管理常用三个命令为df.du和fdisk. df:列出文件系统的整体磁盘使用量 du:检查磁盘空间使用量 fdisk:用于磁盘分 ...

  4. django rest framework csrf failed csrf token missing or incorrect

    django rest framework csrf failed csrf token missing or incorrect REST_FRAMEWORK = { 'DEFAULT_AUTHEN ...

  5. JavaWeb高级:Servlet源码分析

    很多东西归根结底是对Servlet源代码的了解,通过学习源代码加深了解Java高级特性

  6. 使用Python创建简单的HTTP和FTP服务

    不管工作中还是其他场合,经常会有文件分享的需求,比如自己下了一个4GB的游戏,同事下了一个800MB的软件,其他人如果也需要这些文件,显然直接分享是最快捷.最方便.最环保的方式了,如果再重新下,既浪费 ...

  7. JavaScript的Date对象

    整理了一些JavaScript时间的对象,如下所示: toLocaleString()得到当前的年月日和时间的字符串 toLocaleTimeString() 得到当前的时间字符串 toLocaleD ...

  8. NSComparisonResul、NSNotFound、NSEnumerationOptions......的用处

    NSNotFound 定义一个值,用于指示请求项找不到或不存在.Defines a value that indicates that an item requested couldn’t be fo ...

  9. php的特性

    PHP的特性包括: 1. PHP 独特的语法混合了 C.Java.Perl 以及 PHP 自创新的语法. 2. PHP可以比CGI或者Perl更快速的执行动态网页——动态页面方面,与其他的编程语言相比 ...

  10. 自动装配Bean

    Spring提供了几种技巧,可以减少XML的配置数量: 自动装配(autowiring):可以减少<property>(setter注入)和<constructor-arg>( ...