为什么window.load()在firefox中工作，但在chrome中不工作

Why window.load() is working in firefox but not in chrome?

本文关键字：工作 chrome 但在 firefox load window 为什么      更新时间：2023-09-26

我是一个新手，所以请原谅我的知识不足。使用JQuery，我试图在树中显示两个xml文件的数组。代码很简单，这是我的html页面:

window.onload = openXML('xml_files/categories.xml','xml_files/products.xml');
var categories = new Array();
var products = new Array();
function jquery_treeview()
{
var unorderedList= ""; 
console.log(categories.length);
for (i=0; i < categories.length; i++)
    {
        unorderedList += "<li ><span onclick='showCategoryDetails("+i+")'>" + categories[i][1] + "</span><ul><ol type='a'>";
        for (j=0; j < products.length; j++)
        {
            if (categories[i][0] == products[j][2]){
            unorderedList += "<li ><span onclick='showProductDetails("+j+")'>" + products[j][1] +"</span></li>";}
        }
        unorderedList += "</ul></li>";
    }
    var jquerytreeview = $(unorderedList).appendTo("#treeViewRight");
    $("#treeViewRight").treeview({
        add: jquerytreeview
    });
}
function showCategoryDetails(index)
{
var details = "Category: " + categories[index][1]+  "'n"  + "Description: " + categories[index][2];
alert(details);
}
function showProductDetails(index)
{
var details = "Product: " + products[index][1] + "'n" + "Price: " + products[index][4]+ "'n" + "Quantity per Unit: " + products[index][3];
alert(details);
}
function openXML(XMLcategory, XMLproduct)
{
var getCategory, getProduct;
if (window.XMLHttpRequest)
{
    getCategory=new XMLHttpRequest();
    getProduct=new XMLHttpRequest();
}
getCategory.onreadystatechange=function()
{
    if (getCategory.readyState == 4 && getCategory.status == 200)
    {
        category = getCategory.responseXML.documentElement.getElementsByTagName("Categories");
        for (i=0; i < category.length; i++)
        {
            var categoryArray = new Array();
            count=0;
            categoryArray[count++]=category[i].getElementsByTagName("CategoryID")[0].firstChild.nodeValue;
            categoryArray[count++]=category[i].getElementsByTagName("CategoryName")[0].firstChild.nodeValue;
            categoryArray[count++]=category[i].getElementsByTagName("Description")[0].firstChild.nodeValue;
            categories[i]=categoryArray;
        }
    }
}

getProduct.onreadystatechange=function()
{
    if (getProduct.readyState == 4 && getProduct.status == 200)
    {
        product = getProduct.responseXML.documentElement.getElementsByTagName("Products");
        for (i=0; i < product.length; i++)
        {
            var productArray = new Array();
            count=0;
            productArray[count++]=product[i].getElementsByTagName("ProductID")[0].firstChild.nodeValue;
            productArray[count++]=product[i].getElementsByTagName("ProductName")[0].firstChild.nodeValue;
            productArray[count++]=product[i].getElementsByTagName("CategoryID")[0].firstChild.nodeValue;
            productArray[count++]=product[i].getElementsByTagName("QuantityPerUnit")[0].firstChild.nodeValue;
            productArray[count++]=product[i].getElementsByTagName("UnitPrice")[0].firstChild.nodeValue;
            products[i]=productArray;
        }   
    }
}
getCategory.open("GET", XMLcategory, true);
getCategory.send();
getProduct.open("GET", XMLproduct, true);
getProduct.send();
}

jquery.treeview.js文件从这里下载

我的问题是它在Firefox上工作(即使我每次重新加载时都要清除历史记录)，但它在Chrome或IE上不起作用。我希望有人能帮助我。谢谢你。

您有一个竞争条件。您有三个异步操作，两个用于获取数据，一个用于显示树视图。

如果显示树形视图的操作不是最后一个，则它没有显示树形视图所需的数据。

当获取数据的两个操作完成时，您应该显示树视图。您可以在每个readystatechange处理程序的末尾检查其他处理程序是否已经完成。

当您想要显示树视图时，如果文档尚未加载，则需要等待文档加载。在jQuery中使用ready事件可以解决这个问题，因为如果还没有加载，它将等待文档加载，如果文档已经加载，则立即调用该函数。

function showTreeView() {
  $(document).ready(jquery_treeview);
}
getCategory.onreadystatechange=function()
{
    if (getCategory.readyState == 4 && getCategory.status == 200)
    {
        category = getCategory.responseXML.documentElement.getElementsByTagName("Categories");
        for (i=0; i < category.length; i++)
        {
            var categoryArray = new Array();
            count=0;
            categoryArray[count++]=category[i].getElementsByTagName("CategoryID")[0].firstChild.nodeValue;
            categoryArray[count++]=category[i].getElementsByTagName("CategoryName")[0].firstChild.nodeValue;
            categoryArray[count++]=category[i].getElementsByTagName("Description")[0].firstChild.nodeValue;
            categories[i]=categoryArray;
        }
        if (products.length) showTreeView();
    }
}

getProduct.onreadystatechange=function()
{
    if (getProduct.readyState == 4 && getProduct.status == 200)
    {
        product = getProduct.responseXML.documentElement.getElementsByTagName("Products");
        for (i=0; i < product.length; i++)
        {
            var productArray = new Array();
            count=0;
            productArray[count++]=product[i].getElementsByTagName("ProductID")[0].firstChild.nodeValue;
            productArray[count++]=product[i].getElementsByTagName("ProductName")[0].firstChild.nodeValue;
            productArray[count++]=product[i].getElementsByTagName("CategoryID")[0].firstChild.nodeValue;
            productArray[count++]=product[i].getElementsByTagName("QuantityPerUnit")[0].firstChild.nodeValue;
            productArray[count++]=product[i].getElementsByTagName("UnitPrice")[0].firstChild.nodeValue;
            products[i]=productArray;
        }
        if (categories.length) showTreeView();
    }
}

似乎您也尝试将load事件用于openXML函数。这是行不通的，因为它会在事件发生之前被jquery_treeview引用覆盖。但是，您没有将openXML函数设置为事件的事件处理程序，您正在调用该函数并将返回值设置为事件处理程序，并且由于该函数不返回函数，因此不做任何事情。

在开始加载数据之前不需要等待load事件，只需直接调用该方法:

openXML('xml_files/categories.xml','xml_files/products.xml');
相关文章：