How to get all JavaScript functions available to the webpage HTML?

Question

I am wondering whether it is possible to get all the JavaScript functions that are included in the HTML. For example, if my HTML includes the following:

<script src="https://www.example.com/script.js"></script>
<script>
  function foo() {}
  function bar() {}
</script>

How do I use JavaScript to retrieve all the JS functions available to this webpage. In this case, I would need to retrieve foo, bar and all the functions defined in https://www.example.com/script.js. Doing document.getElementsByTagName("script"); only returns the scripts as HTML objects, but I need to get all the functions for each script included in the HTML. Can this be done?

"Can this be done?" Yes, but it is extremely hard to do so. You'd need to get all of the script tags' innerHTML if it has no src, but if it does, you'd need to use fetch() with that url and get the text response. One you get all of that, you'd need a JS parser to find every single function declaration and modifications to window. — Samathingamajig
– Samathingamajig, Commented Dec 5, 2020 at 2:30

antoineMoPa · Accepted Answer · 2020-12-05 04:02:37Z

6

You could iterate on the window object and detect all functions like this:

var list = [];
for (let i in window) {
    if (typeof(window[i]) === "function")
        list.push(i);
}
console.log(list)

By doing this around your script, we can detect functions that were added in-between.

<script>
var list1 = [];
for (let i in window) {
    if (typeof(window[i]) === "function")
        list1.push(i);
}
</script>

<script>
// The script to measure
function newFunction() {}
</script>

<script>
var list2 = [];
for (let i in window) {
    if (typeof(window[i]) === "function")
        list2.push(i);
}
let functionList = list2.filter((item) => {return list1.indexOf(item) == -1})
console.log(functionList.join(" "));
</script>

edited Dec 5, 2020 at 4:02

answered Dec 5, 2020 at 3:25

antoineMoPa

1,08413 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Samathingamajig Over a year ago

window itself is recursively defined: window.window.window.window.window.window === window. This also get variables, objects, arrays, etc., not just functions. Plus this also gets native functions like alert().

antoineMoPa Over a year ago

@Samathingamajig I updated my answer according to your comment to measure between to scripts, thank you for your feedback. I also added if (typeof(window[i]) === "function") to filter out objects, arrays, etc.

Samathingamajig Over a year ago

This doesn't seem to work with arrow functions jsfiddle.net/m27nrovh (has nothing to do with bees being a multilayer arrow function, even a normal arrow function doesnt work)

antoineMoPa Over a year ago

Interesting find! In your example, it does not work with const bees... or let bees.... However, if I change to var bees..., it works again and "bees" is detected. I suppose the let and const will be a limitation of this solution.

Samathingamajig Over a year ago

TIL variables declared with const and let, even when they aren't in a function, don't get added to the window object stackoverflow.com/a/55031001/12101554

Collectives™ on Stack Overflow

How to get all JavaScript functions available to the webpage HTML?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related