问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

jQuery 怎么操作 iframe

头像
kaipizhe
    1.6k29198277

    index.html

    <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="jquery-1.9.1.min.js"></script>
</head>

<body>
<input type="text" id="input" />
<iframe src="iframe.html" id="iframe"></iframe>
<script>
$(function(){
    $("#iframe").on('click', '.a', function(){
        var id = $(this).data("id");
        console.log(id);
        $("#input").val(id);
    });
})    
</script>
</body>
</html>

    iframe.html

    <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
<div>
    <a class="a" data-id="a1">a1</a>
    <a class="a" data-id="a2">a2</a>
    <a class="a" data-id="a3">a3</a>
    <a class="a" data-id="a4">a4</a>
</div>
</body>
</html>

    好像不行，网上找了很多方法都好像不可以

    jqueryiframe
    阅读 3.2k
    1 个回答
    得票最新
    头像
    NeoChang
      1.4k53048
      ✓ 已被采纳

      有的。

      1.在父窗口中操作 选中IFRAME中的所有单选钮

      $(window.frames['iframe'].document).find('.a').click(function() {
    var id = $(this).data("id");
    console.log(id);
})

      2.在IFRAME中操作 选中父窗口中的所有单选钮

      $(window.parent.document).find('#input').val();

      jquery 操作iframe的几种方法总结

      更新：
      其实上面的方法是可以用的。

      1. 要在服务器环境下面调试，就是不要出现 file:///C:/Users/XXX/Desktop/index.html 本地环境打开。Webstorm打开就OK。

      2. 嵌入的 iframe 一定要加载！

      代码修改：

      //  关键所在
 $('#iframe').load(function () {
     // jquery 获取方法
     // $(this).contents().find('.a')
     
     // DOM 转 jquery对象
     //  $(window.frames['iframe'].document).find('.a')
    var doc = $(this).contents();
    var a = doc.find('.a');
    a.click(function () {
        var id = $(this).data("id");
        console.log(id);
        $("#input").val(id);
    });
});

      上面的代码是index.html里面的，
      当然也可以在iframe.html 写以下代码：

      // iframe.html 的话就不担心加载不加载了。
$('.a').click(function() {
    var id = $(this).data("id");
    console.log(id);
    // 获取父级 index.html 的 #input
    $(window.parent.document).find("#input").val(id);
})

      希望能帮到你，望采纳。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题