使用jQuery attr()获取iframe的src返回undefined的问题

看起来你遇到的问题是因为错误使用了ready()方法导致的，我来帮你梳理一下问题所在和解决方案：

问题根源 #

你在点击事件里给iframe元素绑定了ready()方法，但这个方法的设计初衷是监听整个文档DOM加载完成，而非单个元素（尤其是iframe）的加载状态。这种错误用法会导致回调函数的执行时机不符合预期，进而出现获取src属性返回undefined的情况。

修复后的代码 #

既然你的iframe在页面初始化时就已经存在于DOM中了，点击事件触发时直接获取它的属性即可，不需要额外的ready等待：

jQuery(this).bind('click', function(event){
    event.preventDefault();
    // 直接获取iframe元素，用变量缓存起来提升性能
    var $frame = jQuery('#frame1');
    console.log($frame); // 正常显示元素
    console.log($frame.attr('src')); // 现在能正确拿到src值了
    
    // 如果你需要设置新的src属性，直接这样写：
    // $frame.attr('src', '你的新URL地址');
});

如果你需要等待iframe加载完成再操作 #

如果你的场景是需要等iframe加载完成后再修改它的src，那应该使用load事件而非ready：

jQuery(this).bind('click', function(event){
    event.preventDefault();
    var $frame = jQuery('#frame1');
    
    $frame.on('load', function(){
        console.log($(this).attr('src'));
        // 在iframe加载完成后设置新的src
        $(this).attr('src', 'new-frame.php');
    });
    
    // 如果你是要先修改src再等待加载，也可以先设置属性：
    // $frame.attr('src', 'new-frame.php');
});

额外检查项 #

• 确认iframe的id确实是frame1，没有拼写错误
• 控制台查看是否有jQuery未加载或冲突的报错（可以尝试用$代替jQuery测试）

内容的提问来源于stack exchange，提问作者mdguit