为什么我的脚本无法在Ajax文档上工作？

Question

我的js代码不适用于ajax加载的文档。

下面是我的html-js结构。

1. 的index.html
2. index.html中包含的abc.js
3. 在index.html中的fine.html（由ajax_abc.js加载）

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

例如，

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');