Javascript 不要忘记跨域 iframe 的载入情况 ⁹

2008-03-31 17:53:38

在编写某个跨域的 Ajax 调用功能时，出现了个匪夷所思的问题，就是无法载入 iframe 中的连接器（YAHOO.util.Connect），代码和操作无任何的问题。

在麻烦了 圆心 同志 N 遍以后，发现原来是 iframe 没有完全载入，框架中的代码没有运行的缘故。（在这里再次感谢下他，Orz）

这的确是个非常普遍的问题，由于网速的缘故，往往父页面载入完成，而 iframe 中的内容还正在读取。这个时候，父页面调用子页面中的对象时，就会发生问题。

我想到了个变通的办法，就是“等待”子页面载入完成以后，再去尝试运行。如果子页面还没有载入相应的对象，那么就“再等待”一段时间再去尝试。

可能表述上有所欠缺，我们还是看具体的代码。

为了理解，首先说明已经在 HTML 中已经包含了此 iframe，并子页面中也包含了 YUI 的框架代码及相应的控件。

<iframe src="http://.../proxy.htm" id="proxy"></iframe>

下面是相应的 Javascript 代码

var proxy = $('proxy').contentWindow;
Controler.disable = true;  // 获取数据此段期间，禁止用户输入
if (typeof proxy.YAHOO == 'undefined') {
    // 等待一段时间再去尝试，Function 为父类的名称
    setTimeout(function() {Function.get(URL)}, 100); 
    return;
}

// 已经得到子页面对象，获取数据
proxy.YAHOO.util.Connect.asyncRequest('GET', URL, {
    success: function(req) {
        alert(req.responseText);
        Controler.disable = false; // 恢复用户输入
    },

    failure: function() {
        return false;
    }
});

不过这个代码还有很多的问题，目前所能预见到的，就是客户端的资源占用问题。可想而知，如果反复的请求数据对于浏览器来说，资源花销将是非常大的。

大家如果有更好的办法，不妨说说。