最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery操作iframe框架实例使用说明
时间:2022-11-14 22:03:21 编辑:袖梨 来源:一聚教程网
获取iframe中的对象
JQuery好像不能跨过框架直接获取元素的,不过结合DOM和JQuery,可以获取iframe的document对象。有了这个对象,再来用jquery也就方便了。
代码如下 | 复制代码 |
var subdoc=$(document.getElementById('frame1').contentWindow.document; |
但是这里会有一个问题。
如果你可以确保你运行你的后续代码的时候,子框架已经ready的话,当然是没有问题的。但往往我们的JQuery代码经常会用来做一些初始化的动 作,这时候,虽然你绑定了父窗口的ready事件,但实际上此时自框架不一定ready,所以说,如果要给自框架做一些初始化工作的话,必须要绑定自框架 的document 的ready事件.
1、 内容里有两个ifame
代码如下 | 复制代码 |
leftiframe中jQuery改变mainiframe的src代码:
代码如下 | 复制代码 |
$(“#mainframe”,parent.document.body).attr(“src”,”http://www.111com.net“) |
2、 如果内容里面有一个ID为mainiframe的ifame
代码如下 | 复制代码 |
|
得到someID的内容
$(“#mainiframe”).contents().find(“someID”).html() html 或者 $(“#mainiframe”).contains().find(“someID”).text()值
3、在父窗口中操作 选中IFRAME中的所有单选钮
代码如下 | 复制代码 |
$(window.frames["iframe1"].document).find(“input[@type='radio']“).attr(“checked”,”true”); |
那选择id自然就是依然使用find方法
代码如下 | 复制代码 |
$(window.frames["iframe1"].document).find(“#id”) |
4、 如上面所示
leftiframe中的jQuery操作mainiframe的内容someID的内容
代码如下 | 复制代码 |
$(“#mainframe”,parent.document.body).contents().find(“someID”).html()或者 $(“#mainframe”,parent.document.body).contents().find(“someID”).val() |
父页面和子页面相互操作
a.html页面
代码如下 | 复制代码 |
test |
b.html页面
代码如下 | 复制代码 |
|
iframe 自适应高度
iframe代码,注意要写ID
代码如下 | 复制代码 |
|
jquery代码1:
代码如下 | 复制代码 |
//注意:下面的代码是放在test.html调用 |
jquery代码2:
代码如下 | 复制代码 |
//注意:下面的代码是放在和iframe同一个页面调用 |
相关文章
- 人们熟悉的寄居蟹属于以下哪种分类 神奇海洋11月21日答案 11-21
- 第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍 11-21
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21