最新下载
热门教程
- 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同一个页面调用 |
相关文章
- 无限暖暖搭乘大鸟巴士怎么玩 公测第三天每日任务做法介绍 12-27
- 奇迹暖暖绚光护佑搭配攻略 奇迹暖暖绚光护佑过关攻略 12-27
- 绝区零月城柳意像影画怎么样 12-27
- 无限暖暖翩翩愿飞去怎么样 12-27
- 黑神话悟空1.0.12.16581版本更新公告 12-27
- 光遇12.27红石碎片在哪里 12-27