jquery操作iframe框架实例使用说明

作者：袖梨 2022-11-14

获取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.1***11com.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代码１：

代码如下 复制代码

//注意：下面的代码是放在test.html调用
$(window.parent.document).find("#main").load(function(){
var main = $(window.parent.document).find("#main");
var thisheight = $(document).height()+30;
main.height(thisheight);
});


jquery代码２：

代码如下 复制代码

//注意：下面的代码是放在和iframe同一个页面调用
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
});

相关文章

精彩推荐