Why isn't my JavaScript function able to access global-scope functions/variables defined in my other .js files?
Question
I wrote a script like that:
NS.load = function(src) {
var script = document.createElement("script").setAttribute("src", src);
document.getElementsByTagName("head")[0].appendChild(script);
}
It loads files but I can't reach functions and variables defiened in other files.
//js/main.js
var qux = {name: "name"};
NS.load("js/foo.js");
//js/foo.js
alert(qux.name); //undefined variable
But if I define qux like this:
window.qux = {name: "name"};
I can reach qux variable in other modules. As far as I know all globals are already a member of window object. So why I have to define variables like this. Could you offer another method?
Thanks.
1 answers
solution1
7 ACCPTED 2010-01-11 12:41:26
It looks like you tried to shortcut your code by calling createElement and setAttribute all on 1 line, but setAttribute doesn't return anything, so you can't go calling appendChild on it's return value, because there is none.This will fix it:
NS.load = function(src) {
var script = document.createElement("script");
script.setAttribute("src", src)
document.getElementsByTagName("head")[0].appendChild(script);
}
Edit:
What sort of environment are you running your code in? Is something happening cross-site or are you defining qux inside of another function? The following works for me, running the files via http://localhost/test.html
<html>
<head>
<script type="text/javascript">
load = function(src) {
var script = document.createElement("script");
script.setAttribute("src", src);
document.getElementsByTagName("head")[0].appendChild(script);
}
var qux = {name: "name"};
load("foo.js");
</script>
</head>
<body></body>
</html>
foo.js:
alert(qux.name);
I get an alert with "name" when the page loads.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.