• 【学习】如何用jQuery获取iframe中的元素


    (我的博客网站中的原文:http://www.xiaoxianworld.com/archives/292,欢迎遇到的小伙伴常来瞅瞅,给点评论和建议,有错误和不足,也请指出。)

    说实在的,以前真的很少用到iframe,可最近公司把主要精力放在了研发后台系统上,所以iframe的出场就高了。今天写一个小知识,如何获取iframe中的元素。js原生方法我就不写了,毕竟还是对jquery情有独钟,用到的是contents()方法,请看官方解释:http://www.w3school.com.cn/jquery/traversing_contents.asp

    所以说,用contents()是一定能获取到iframe中的元素的,但是必须在同一个域,这里就引出“跨域”的问题,以下是百度出来的知识点:

    什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。

    详细请查看这篇文章:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

    所以呢,我们在主页面去访问iframe中的元素,给其加一个js事件,是不起作用的。写一个最最简单的alert弹出,在页面中,有一个iframe,其src为a.html,在a.html中有一个按钮,class起名btn。在主页面中写上如下js代码:

    $(function(){

    var btn=$(this).contents().find(".btn");

    btn.click(function(){

    alert(1);

    });

    });

    这时点击这个按钮,是没有任何反应的(实例请点击查看)。

    所以,要修改,给iframe加一个load()即可:

    $(function(){

    $(".my-iframe").load(function(){

    var btn=$(this).contents().find(".btn");

    btn.click(function(){

    alert(1);

    });

    });

    });

    加load后的实例查看

    还有一点要注意,如果iframe中没有引入jquery库文件,那么在主页面中引入的库文件,一定在放在iframe之前,放其之后是不起作用的。而如果iframe中也引入了jquery库文件,则主页面中的库文件放在任何位置都可以了。

    好了,今天只写这一个小问题吧,关于iframe还有很多麻烦的事情,改天再总结一下其他的。

  • 相关阅读:
    +1和*2
    线段树(区间最大值和最大值的个数)
    CodeForces
    莫队算法入门(暴力而不失优雅)
    二分迷宫
    全错排公式
    C++ PAT乙 1051. 复数乘法 (15)
    C++ PAT乙 1070. 结绳(25)
    C++ PAT乙 1080. MOOC期终成绩 (25)
    C++ PAT 1073. 多选题常见计分法(20)
  • 原文地址:https://www.cnblogs.com/xiaoxianweb/p/7691596.html
Copyright © 2020-2023  润新知