Question

我的js代码不能处理由ajax加载的文档。

下面是我的html-js结构。

的index.html
abc.js包含在index.html
fine.html里面的index.html（由ajax_abc.js加载）

如果我定义了一些变量（请参阅fine.html中的元素），该变量将变为空。

例如，

的index.html：

<script src="abc.js"></script>

abc.js：

ajax load document sententes;
var a = document.getElementById('asdf'); // asdf is located in fine.html

浏览器控制台：

a; // result: null

a = document.getElementById('asdf');
a; // result: not null

我认为这是因为当加载abc.js时，fine.html不存在。

Thay为什么abc.js没有使用fine.html（ajax文档）。

我把abc.js放在fine.html的底部，但那不起作用。

如何让我的脚本适用于ajax文档？

abc.js中的ajax代码：

var xhr;
xhr = new XMLHttpRequest();
function xhrDocOpen(doc){
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4 && xhr.status==200){
            document.getElementById('bodyFrame').innerHTML=xhr.responseText;
        }
    }
    xhr.open('GET',doc,true);
    xhr.send();
}
    xhrDocOpen('introOrgan.html');

Answer 1

您需要使用document的正确范围。

这一行：

var a = document.getElementById('asdf');

失败，因为document适用于index.html，而非fine.html。

首先，您需要等到fine.html加载完毕。

尝试这样做，它等待内容加载，然后将a分配给从fine.html注入的元素：

var a;
var xhr;
xhr = new XMLHttpRequest();
function xhrDocOpen(doc){
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4 && xhr.status==200){
            // load content from fine.html into DOM
            document.getElementById('bodyFrame').innerHTML=xhr.responseText;

            // search DOM after fine.html content loaded
            a = document.getElementById('asdf');
        }
    }
    xhr.open('GET',doc,true);
    xhr.send();
}
    xhrDocOpen('introOrgan.html');

为什么我的脚本不能处理ajax文件？

1 个答案: