jquery怎么操作iframe

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery怎么操作iframe相关的知识,希望对你有一定的参考价值。

使用jquery操作iframe
1、 内容里有两个ifame
<iframe id="leftiframe"...</iframe>
<iframe id="mainiframe..</iframe>
leftiframe中jQuery改变mainiframe的src代码:
$("#mainframe",parent.document.body).attr("src","http://www.radys.cn")
2、 如果内容里面有一个ID为mainiframe的ifame
<iframe id="mainifame"...></ifame>
ifame包含一个someID
<div id="someID">you want to get this content</div>
得到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()

参考:http://www.cnblogs.com/xyicheng/archive/2010/02/26/1674017.html
参考技术A 1、iframe子页面调用父页面js函数

子页面调用父页面函数只需要写上window.praent就可以了。比如调用a()函数,就写成:

复制代码代码如下:

window.parent.a();

子页面取父页面中的标签中的值,比如该标签的id为“test”,则:

复制代码代码如下:

window.parent.document.getElementById("test").value;

jQuery方法为:

$(window.parent.document).contents().find("test").val();

但是我在chrome浏览器下却发现此方法无效了!查了半天才了解,在chrome 5+中,window.parent无法在file://协议中运行,但是发布了之后http://协议下是可以运行的。此方法支持ie、firefox浏览器。

2、iframe父页面调用子页面js函数

复制代码代码如下:

这个就稍微复杂一些,下面的方法支持ie和firefox浏览器:

document.getElementById('ifrtest').contentWindow.b();

子页面取父页面中的标签中的值,比如该标签的id为“test”,则:

document.getElementById("test").value;

注:ifrtest是iframe框架的id,b()为子页面js函数。contentWindow属性是指定的frame或者iframe所在的window对象,IE下可以省略。
参考技术B 用 iframe 里的 jQuery 操作是最简单的。否则先得取出 iframe 里的元素再用 jQuery 包覆。如果拿不到 iframe 的元素,大概是跨域限制,jQuery 也是没有办法的。

jQuery操作iframe里面的Dom问题

$(window.frames['frame'].document).find('#mes').css(color:'red')
frame是页面iframe的id,mes是iframe连接页面的id元素。这个怎么无法执行?

//给予框架加载事件
window.frames["frame"].onload = function () 
  //启用计时器 判断页面加载完成
  var t = setInterval(function () 
  
      //页面载入完成后 等待0.1秒后 处理数据
      if (window.frames["frame"].document.readyState == "complete") 
      
            //清除计时器
            clearInterval(t);
            //等待0.1秒后 处理数据
            setTimeout(function () 
                  //设置color
                  window.frames["frame"].document.getElementById("mes").style.color="red";
           , 100);
      
    , 100);
参考技术A $("#frame").contents.find('#mes').css(color:'red')

追问

$("#frame").load(function()
$(this).contents().find("#mes").css('color','red');
)
是这样的。

参考技术B 貌似是css()出错追问

那这个应该怎么实现?

追答

css("background-color","red")

追问

没有没有,这个写法是对的。

追答

那这行代码应该没错啊,是不是你没应用js?

追问

已经解决了,是因为iframe里面的Dom还没有加载进来,所以获取不到里面的 Dom值。

以上是关于jquery怎么操作iframe的主要内容,如果未能解决你的问题,请参考以下文章

7.Ajax

jquery怎么操作iframe

jquery each 怎么获取当前操作元素的索引

jquery 操作下拉框 选中某项 怎么写?

JQuery怎么做ajax的延时操作?

jquery中的回调函数怎么用