爱学习的小朋友 2022-12-14 00:14 采纳率: 88.9%
浏览 35
已结题

jQuery动态获取多个ifame中的子元素,并做出修改

页面中包含多个ifame框架,且在同一域名下,ifame的id是随机生成的。怎样在遍历ifame的id值后,获取里面的ul>li>a,并修改a标签中的属性值呢?
例如:其中某个ifame页面中包含下面的列表:

<ul>
      <li><a href="aa.html">链接a</a></li>
      <li><a href="bb.html">链接b</a></li>
      <li><a href="cc.html">链接c</a></li>
      <li><a href="dd.html">链接d</a></li>
</ul>

怎样动态获取ifame中所有的a标签,然后做出比如:创建一个data属性,然后把href=""中的链接值放到data里,再给href替换成javascript:void(0)

目前可以取到ifame的id值,不知道如何进一步实现类似上面的结果。请哪位朋友帮忙指点下,谢谢了。

<html>
 
<head>
    <meta charset="utf-8">
    <title>获取多个ifame中子元素</title>
   <script src="jquery-2.2.4.min.js" type="text/javascript"></script>
</head>
<body>  
<input type="button" id="cs" value="测试修改">    
<div id="views">
    <div id="view1">
        <iframe id="7a9deda549af" src="1.html" >
    </div>
    <div id="view2">
        <iframe id="7a9deda549af" src="2.html">
    </div>
</div>

<script>
    $(document).ready(function(){        
        $('#cs').click(function(){
            var ifames = [];
                $("iframe").each(function(){
                  var ifid = $(this).attr('id');
                  ifames.push(ifid);
                })
                console.log(ifames);
        })
    });
</script>

</body> 
</html>
  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2022-12-14 08:43
    关注

    要操作iframe前提是不能跨域,本地file浏览不用用webkit核心浏览器,默认不允许操作,出现跨域错误,jquery可以用jquery对象的contents方法得到iframe内部作用域
    示例代码如下

    <html>
    <head>
        <meta charset="utf-8">
        <title>获取多个ifame中子元素</title>
        <script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
        <input type="button" id="cs" value="测试修改">
        <div id="views">
            <div id="view1">
                <iframe id="7a9deda549af" src="1.html"></iframe>
            </div>
            <div id="view2">
                <iframe id="7a9deda549af" src="2.html"></iframe>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                $('#cs').click(function () {
                    var ifames = [];
                    $("iframe").each(function () {
                        var ifid = $(this).attr('id');
                        var ctx = $(this).contents();//得到内部iframe
                        ctx.find('a').attr('data', function () { $(this).attr('href') }).attr('href','javascript:void(0)')
                        ifames.push(ifid);
                    })
                    console.log(ifames);
                })
            });
        </script>
    </body>
    </html>
    
    

    chrome本地file测试要想访问iframe,可以按照下面的文章配置过

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 12月22日
  • 已采纳回答 12月14日
  • 创建了问题 12月14日

悬赏问题

  • ¥60 许可证msc licensing软件报错显示已有相同版本软件,但是下一步显示无法读取日志目录。
  • ¥15 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统,原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时,终端显示出了sequence handled的进度条,但是并不出结果就自动终止回到命令提示行了是怎么回事:
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥30 关于<main>标签页面跳转的问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系
  • ¥30 VMware 云桌面水印如何添加
  • ¥15 用ns3仿真出5G核心网网元