js取不到iframe元素

跨域 iframe 请绕道，下文是针对非跨域 iframe 的问题排除

 

1、iframe 取不到值的问题的原因

　　1. 父页面未加载完成

　　2. iframe 未加载完成

　　3. 语法使用错误

　　4. 跨域（此处不参与讨论）

 

2、iframe 的基本操作

1. 等待 iframe 加载

// JavaScript方法
if (iframe.attachEvent){  
    iframe.attachEvent("onload", function(){ // IE
    });
} else {  
    iframe.onload = function(){ // 非IE
    };
}  

// jQuery方法
$('#iframe_id').load(function() {
    // 加载完成后逻辑
});

2. 对 iframe 内元素的基本操作

// js方式1
var iframe = document.getElementById('iframe');
// js方式2
var iframe = window.frames["iframe"];

// js执行iframe内函数 方式1
iframe.contentWindow.iframeMethod(fn);
// js执行iframe内函数 方式2
window.frames["iframe"].window.fn();

// jQuery 寻找iframe元素 方式1
$("#iframe").contents().find("#el");
// jQuery 寻找iframe元素 方式2
$(window.frames["iframe"].document).find("#el"); 

3. iframe 访问父属性

// iframe内访问父页面 函数/变量
window.fn();
window.testKey = 123;

 

3、示例代码

// JS方式
window.onload = function() {
    // 等待iframe加载完成
    var iframe = document.getElementById('iframe');
    if (iframe.attachEvent){  
        iframe.attachEvent("onload", function() { // IE
            fn();
        });
    } else {  
        iframe.onload = function() { // 非IE
            fn();
        };
    }
    
    function fn() {
        // 主体逻辑
        iframe.contentWindow.document.getElementById('id');
    }
};

// jQuery方式
$(function() {
    // 等待iframe加载完成
    $('#iframe').load(function() {
        // 主体逻辑
        $(this).contents().find('#id');
    });
});