从外部JavaScript运行两个onLoad？

Question

I currently have two external scripts for my site that both require the use of onLoad. They are:

One that automatically generates a table of contents:

window.onload = function () {
var toc = "";
var level = 1;

document.getElementById("contents").innerHTML =
    document.getElementById("contents").innerHTML.replace(
        /<h([\d])>([^<]+)<\/h([\d])>/gi,
        function (str, openLevel, titleText, closeLevel) {
            if (openLevel != closeLevel) {
                return str;
            }

            if (openLevel > level) {
                toc += (new Array(openLevel - level + 1)).join("<ol>");
            } else if (openLevel < level) {
                toc += (new Array(level - openLevel + 1)).join("</ol>");
            }

            level = parseInt(openLevel);

            var anchor = titleText.replace(/ /g, "_");
            toc += "<li><a href=\"#" + anchor + "\">" + titleText
                + "</a></li>";

            return "<h" + openLevel + "><a name=\"" + anchor + "\">"
                + titleText + "</a></h" + closeLevel + ">";
        }
    );

if (level) {
    toc += (new Array(level + 1)).join("</ol>");
}

document.getElementById("toc").innerHTML += toc;
};

And another that is used to find certain words in a paragraph and replace them with given JavaScript.

var doc, bod, E, makeLink;
var pre = onload;
onload = function(){
if(pre)pre();

doc = document; bod = doc.body;
E = function(id) {
  return doc.getElementById(id);
}
T = function(tag) {
  return doc.getElementsByTagName(tag);
}
makeLink = function(node, word, href) {
  if(node.innerHTML) {
    node.innerHTML = node.innerHTML.replace(word, "<a href='"+href+"'>"+word+'</a>');
  }
  return false;
}

makeLink(E('testId'), 'Within', 'within.html');
makeLink(E('testId'), 'assuming', 'assuming.html');

}

However, as they're both using onLoad, they don't work together. Is there a way to get them both to function on the same page?

Answer 1

Use addEventListener instead of setting the property of the window object. Here's a MDN page .

You can do something like that:

window.addEventListener('load', function() {
    console.log('Loaded 1');
});

window.addEventListener('load', function() {
    console.log('Loaded 2');
});

Both of them should fire off.

Answer 2

functionA() {
    var toc = "";
    var level = 1;

    document.getElementById("contents").innerHTML =
        document.getElementById("contents").innerHTML.replace(
            /<h([\d])>([^<]+)<\/h([\d])>/gi,
            function (str, openLevel, titleText, closeLevel) {
                if (openLevel != closeLevel) {
                    return str;
                }

                if (openLevel > level) {
                    toc += (new Array(openLevel - level + 1)).join("<ol>");
                } else if (openLevel < level) {
                    toc += (new Array(level - openLevel + 1)).join("</ol>");
                }

                level = parseInt(openLevel);

                var anchor = titleText.replace(/ /g, "_");
                toc += "<li><a href=\"#" + anchor + "\">" + titleText
                    + "</a></li>";

                return "<h" + openLevel + "><a name=\"" + anchor + "\">"
                    + titleText + "</a></h" + closeLevel + ">";
            }
        );

    if (level) {
        toc += (new Array(level + 1)).join("</ol>");
    }

    document.getElementById("toc").innerHTML += toc;
}

functionB() {
    var doc, bod;
    //var pre = onload;
    //onload = function(){
    //if(pre)pre();

    doc = document; bod = doc.body;

    makeLink(E('testId'), 'Within', 'within.html');
    makeLink(E('testId'), 'assuming', 'assuming.html');

    }
}

window.E = function(id) {
  return doc.getElementById(id);
}
window.T = function(tag) {
  return doc.getElementsByTagName(tag);
}
window.makeLink = function(node, word, href) {
  if(node.innerHTML) {
    node.innerHTML = node.innerHTML.replace(word, "<a href='"+href+"'>"+word+'</a>');
  }
  return false;
}

Then you call onload from body tag(If you want one to execute before the other, change the order):

<body onload="functionA(); functionB();">