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

<!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 内容:

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>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框架,代码就更短了.

收集网上的一些示例：

用jQuery在IFRAME里取得父窗口的某个元素的值 只好用DOM方法与jquery方法结合的方式实现了
1. 在父窗口中操作 选中IFRAME中的所有单选钮

$(window.frames["iframe1"].document).find("input:radio").attr("checked","true");

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

$(window.parent.document).find("input:radio").attr("checked","true");

父窗口想获得IFrame中的Iframe，就再加一个frames子级就行了，如：

$(window.frames["iframe1"].frames["iframe2"].document).find("input:radio").attr("checked","true");

3.在子窗口中调用父窗口中的另一个子窗口的方法(FRAME)：

 parent.frames["Main"].Fun();

注意：建议使用[]，这样比较兼容多个浏览器，() 火狐/搜狗/谷歌不兼容

用JS或jQuery访问页面内的iframe的更多相关文章

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

    用JS或jQuery访问页面内的iframe,兼容IE/FF js或者jQuery访问页面中的框架也就是iframe.注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.htm ...

  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. OpenCV、PCL；Xtion、kinect；OpenNI、kinect for windows SDK比较

    一.对比介绍: 1. OpenCV:开源跨平台,OpenCV于1999年由Intel建立,如今由Willow Garage提供支持. 2. OpenNI:OpenNI组织创建于2010年11月.主要成 ...

  2. java集合系列之LinkedList源码分析

    java集合系列之LinkedList源码分析 LinkedList数据结构简介 LinkedList底层是通过双端双向链表实现的,其基本数据结构如下,每一个节点类为Node对象,每个Node节点包含 ...

  3. JavaScript 层

    代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--& ...

  4. 【Todo】Spark运行架构

    接上一篇:http://www.cnblogs.com/charlesblc/p/6108105.html 上一篇文章中主要参考的是 Link 这个系列下一篇讲的是Idea,没有细看,又看了再下一篇: ...

  5. 深入浅出：Linux设备驱动之字符设备驱动

    一.linux系统将设备分为3类:字符设备.块设备.网络设备.使用驱动程序: 字符设备:是指只能一个字节一个字节读写的设备,不能随机读取设备内存中的某一数据,读取数据需要按照先后数据.字符设备是面向流 ...

  6. Python基础语法08--MySql应用

    python操作mysql数据库 Python 标准数据库接口为 Python DB-API,Python DB-API为开发人员提供了数据库应用编程接口. DB-API 是一个规范. 它定义了一系列 ...

  7. TCP/IP Protocol Architecture

    原文: https://technet.microsoft.com/en-sg/library/cc958821.aspx 1. 主机到网络层 2.网络互连层(互连这个翻译好) ----------- ...

  8. [转]JVM堆和栈的区别

    物理地址 堆的物理地址分配对对象是不连续的.因此性能慢些.在GC的时候也要考虑到不连续的分配,所以有各种算法.比如,标记-消除,复制,标记-压缩,分代(即新生代使用复制算法,老年代使用标记——压缩) ...

  9. SolidEdge 如何由装配图快速进行标注和零件序号编写 制作BOM表

    点击"零件明细表",然后点击要生成序号的视图,然后点击前面两项(自动标号和放置清单),点击完成后效果如下图所示.   在点击完成之前,先点击他前面的一个按钮,取消勾选"项 ...

  10. mysql添加删除索引，查看某个表的建表语句

    查看某个表的建表语句 :show create table data_statdata; drop index ts on data_statdata; 索引是加速查询的主要手段,特别对于涉及多个表的 ...