I've tried delaying the code even if I execute window.functionName in the console before the code actually finishes it, I still get the same outcome (works when I directly enter window.functionName
in the console but not when being executed from the javascript code).
Note this is all happening in the content-script of a chrome extension.
For full context, I have a Vue component which has a method that calls a function in another javascript file which eventually calls window.functionName -- so something like this:
SomeVueComponent.vue
<template>
<button @click="buttonClicked">
</template>
<script>
import { doSomething } from 'do-something.js';
export default {
...
methods: {
buttonClicked() {
doSomething();
}
}
}
</script>
do-something.js
export function doSomething() {
doFunctionName() {
window.functionName(); // Returns "Uncaught ReferenceError: functionName is not defined"
}
...
whenElementIsShown() {
// When the element was shown a script was injected to the page that sets window.functionName
// to something. I tried putting doFunctionName in a timeout and got the same results.
doFunctionName();
}
}
Whereas in the developer tools console...
window.functionName() // Returns "f (){...}"
I'm just not sure why window
would be different in the two cases. Is it because of Vue? Is it some scoping issue? Is there a way to get the most recently updated window
?