用JS或jQuery访问页面内的iframe,兼容IE/FF

js或者jQuery访问页面中的框架也就是iframe.
注意:框架内的页面是不能跨域的!

假设有两个页面,在相同域下.

index.html 文件内含有一个iframe:

XML/HTML代码 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>页面首页</title>

</head>

<body>

<iframe src="iframe.html" id="koyoz" height="0" width="0"></iframe>

</body>

</html>

iframe.html 内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>iframe.html</title>

</head>

<body>

<div id="test">www.koyoz.com</div>

</body>

</html>

1. 在index.html执行JS直接访问:

document.getElementById('koyoz').contentWindow.document.getElementById('test').style.color='red'

通过在index.html访问ID名为'koyoz'的iframe页面,并取得此iframe页面内的ID为'test'的对象,并将其颜色设置为红色.

此代码已经测试通过,能支持IE/firefox .
2. 在index.html里面借助jQuery访问:

$("#koyoz").contents().find("#test").css('color','red');

此代码的效果和JS直接访问是一样的,由于借助于jQuery框架,代码就更短了.

补充一下：

用DOM方法与jquery方法结合的方式实现了
1.在父窗口中操作 选中IFRAME中的所有单选钮

$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

2.在IFRAME中操作 选中父窗口中的所有单选钮

$(window.parent.document).find("input[@type='radio']").attr("checked","true");

iframe框架的：<iframe src="test.html" id="iframe1" width="700" height="300" frameborder="0" scrolling="auto"></iframe>
IE7中测试通过

来自http://www.cnblogs.com/luluping/archive/2009/04/17/1437770.html

用JS或jQuery访问页面内的iframe,兼容IE/FF的更多相关文章

  1. 用JS或jQuery访问页面内的iframe

    用JS或jQuery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的!假设有两个页面,在相同域下.index.html 文件内含有一个iframe: <!DOCTYPE ...

  2. jQuery实现页面内锚点平滑跳转

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...

  3. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  4. js原生 + jQuery实现页面滚动字幕

    js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...

  5. js和jquery实现页面滚动监听

    js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...

  6. js记录用户访问页面和停留时间

    1.setInterval setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval(code,millisec[,"lang" ...

  7. js或jquery实现页面打印(局部打印)

    首先定义css样式:  复制代码代码如下: @media print { .noprint { display: none;color:green } }  对于不想打印的内容只用在标签中加上 cla ...

  8. JS判断手机访问页面，根据手机访问或者PC访问跳转

    当用户访问你网站时,如果是PC端访问,则不作处理,如果是手机或者平板访问,就跳转到自己定义的手机页面去,这个在做webapp的时候经常用到,把代码分享给大家,希望对大家有所帮助. 首先,你要在页面中引 ...

  9. js或jquery实现页面打印可局部打印

    方法一:直接用js的打印方法 <input id="btnPrint" type="button" value="打印" onclic ...

随机推荐

  1. [原创] Ubuntu Linux 安装Eclipse

    一 安装JDK 1.下载 JDK 7从http://www.oracle.com/technetwork/java/javasebusiness/downloads/选择下载JDK的最新版本 JDK ...

  2. 【解题报告】PKU 2826 An Easy Problem?!

    原题链接:http://poj.org/problem?id=2826 一题很蛋疼的一题.目前为止还有一个问题我没搞清楚,问题注在代码中. 题目大意: 外面下雨了,农民Johnoson的bull(?? ...

  3. Linux多线程下载工具Axel

    一般情况,在 Linux 下我们习惯于用 wget 下载,但该工具的缺点就是无法进行多线程下载,所以往往有时候速度不够快.这里介绍的 Axel,是 Linux 下一款不错的 HTTP 或 FTP 高速 ...

  4. Hadoop 学习总结之一：HDFS简介

    一.HDFS的基本概念 1.1.数据块(block) HDFS(Hadoop Distributed File System)默认的最基本的存储单位是64M的数据块. 和普通文件系统相同的是,HDFS ...

  5. 参考：iPhone OS 3.0中的字体列表

    字体是我们在iPhone开发中经常需要用到的.但是iPhone里面到底内置了哪些字体呢?下面就是一个常用的列表. Family name: AppleGothic Font name: AppleGo ...

  6. UIScrollView 不能滚动的问题

    uiscrollview是开发sdk自带的控件, 在使用的时候,发现滚动不了, 最常山见的原因是 contentSize 这个属性,比uiscrollview的frame要小...所以无需滚动,自然就 ...

  7. nginx 的模块及处理流程

         nginx的内部结构是由核心部分和一系列的功能模块所组成.这样划分是为了使得每个模块的功能相对简单,便于开发,同时也便于对系统进行功能扩展.这样的模块化设计类似于面向对象中的接口类,它增强了 ...

  8. Loadrunner脚本之C语言文件处理函数

    一.打开文件 打开文件使用库函数中的fopen函数.fopen函数会为要打开的文件新建一个流,然后返回一个指向file型对象的指针,该file型对象中保存了控制这个流所需要的信息. fp=fopen( ...

  9. 【Linux】一个简单的线程创建和同步的例子

    最近很多精力在Linux上,今天简单看了一下Linux上的线程和同步,其实不管windows还是Linux,OS层面的很多原理和概念都是相同的,很多windows之上的经验和概念完全可以移植到Linu ...

  10. 【LeetCode】231 - Power of Two

    Given an integer, write a function to determine if it is a power of two. Solution:一个整数如果是2的整数次方,那么它的 ...