jQuery获取iframe中元素值

这次给大家带来jQuery获取iframe中元素值,jQuery获取iframe中元素值的注意事项有哪些,下面就是实战案例,一起来看一下。

jquery取得iframe中元素的几种方法:

在iframe子页面获取父页面元素

$('#objId', parent.document);

登录后复制

搞定…

在父页面 获取iframe子页面的元素:

$("#objid",document.frames('iframename').document)$(document.getElementById('iframeId').contentWindow.document.body).html()

登录后复制

显示iframe中body元素的内容。

$("#testId", document.frames("iframename").document).html();

登录后复制

根据iframename取得其中ID为”testId”元素

$(window.frames["iframeName"].document).find("#testId").html()

登录后复制

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

注意:框架内的页面是不能跨域的!

假设有两个页面,在相同域下.

index.html 文件内含有一个iframe:

页面首页

登录后复制

iframe.html 内容:

iframe.html

www.jb51.net

登录后复制

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");

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

Jquery操作js数组及对象步骤详解

jquery遍历筛选数组与json对象的方法合集

以上就是jQuery获取iframe中元素值的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2768606.html

(0)
上一篇 2025年3月8日 12:06:32
下一篇 2025年3月8日 12:06:41

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JQuery中使用Ajax操作案列详解

    这次给大家带来JQuery中使用Ajax操作案列详解,JQuery中使用Ajax操作的注意事项有哪些,下面就是实战案例,一起来看一下。  Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编…

    编程技术 2025年3月8日
    200
  • jQuery Ajax解析大全

    这次给大家带来jQuery Ajax解析大全,jQuery Ajax使用的注意事项有哪些,下面就是实战案例,一起来看一下。 什么是Ajax Ajax基本概念 Ajax(Asynchronous JavaScript and XML):翻译成…

    编程技术 2025年3月8日
    200
  • jQuery怎么取消ajax请求

    这次给大家带来jQuery怎么取消ajax请求,jQuery取消ajax请求的注意事项有哪些,下面就是实战案例,一起来看一下。 这里需要注意的是,在ajax请求未响应之前可以用xhr.abort()取消,但如果请求已经到达了服务器端,这样做…

    编程技术 2025年3月8日
    200
  • JQuery调用Ajax加载图片

    这次给大家带来JQuery调用Ajax加载图片,JQuery调用Ajax加载图片的注意事项有哪些,下面就是实战案例,一起来看一下。 最先想到的思路是利用缓存,也就是先显示提示消息,然后get图片,在get完的时候回调,将img标签的src改…

    编程技术 2025年3月8日
    200
  • jQuery使用ajax跨域获取数据步骤详解

    这次给大家带来jQuery使用ajax跨域获取数据步骤详解,jQuery使用ajax跨域获取数据的注意事项有哪些,下面就是实战案例,一起来看一下。 jQuery使用ajax跨域获取数据的简单实例 var webMethod = “http:…

    编程技术 2025年3月8日
    200
  • jQuery怎么做出监控页面ajax请求

    这次给大家带来jQuery怎么做出监控页面ajax请求,jQuery做出监控页面ajax请求的注意事项有哪些,下面就是实战案例,一起来看一下。 你是不是有遇到这样的问题:页面发起两个ajax请求,希望它们都成功以后,再做一个动作? 很容易想…

    编程技术 2025年3月8日
    200
  • jquery中ajax执行顺序调整

    这次给大家带来jquery中ajax执行顺序调整,jquery中ajax执行顺序调整的注意事项有哪些,下面就是实战案例,一起来看一下。 今天在做用户注册时:发现了一个奇怪的问题,请看代码: $(‘input[name=”username”]…

    编程技术 2025年3月8日
    200
  • jquery操作json并定义json步骤详解

    这次给大家带来jquery操作json并定义json步骤详解,jquery操作json并定义json的注意事项有哪些,下面就是实战案例,一起来看一下。 一、背景 json是一种轻量级数据交换格式,非常利于Java服务与js的交互,本文将介绍…

    编程技术 2025年3月8日
    200
  • jQuery表格插件datatables使用详解

    这次给大家带来jQuery表格插件datatables使用详解,使用jQuery表格插件datatables的注意事项有哪些,下面就是实战案例,一起来看一下。 DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的…

    编程技术 2025年3月8日
    200
  • jquery隔行交替给表格添加样式

    这次给大家带来jquery隔行交替给表格添加样式,jquery隔行交替给表格添加样式的注意事项有哪些,下面就是实战案例,一起来看一下。 学习了jquery,发现其功能真的很令我惊讶,为表格添加背景色用css也可以实现,却不得不在 标签里一行…

    2025年3月8日
    200

发表回复

登录后才能评论