在动态添加的脚本元素之外的热读取变量



我使用下一个代码将脚本动态添加到页面中:

var newScriptElem = document.createElement("script");
newScriptElem.innerHTML = myJSCodeString; // myJSCodeString loaded before from .js separate file.
parentElement.appendChild(newScriptElem);

里面的代码确实被调用了,并且运行得很好,但我无法获得该块之外的任何变量。我以前通过使用<script src="app.js">标记手动添加了一个singleton对象。它有全局变量,我想读一下。

如果我在HTML文件中添加script标记中的代码,效果会很好,但如果我试图从动态加载的脚本中获取代码,效果就不好了。

以下是app.js的外观,基本上是:

var app = new App();
function App(){
this.someVar = 2;
}

这个确实有效

<body>
<script src="js/app.js"></script>
<script>
console.log(app); // Outputs App Obj
</script>
</body>

但事实并非如此:

var newScriptElem = document.createElement("script");
newScriptElem.innerHTML = "console.log(app)"; // Outputs "undefined"
parentElement.appendChild(newScriptElem);

有没有任何方法可以从动态添加的脚本元素的范围中读取全局变量?

顺便说一句,我试着使用Cordova,但它在Chrome浏览器中不起作用。。

在您的问题中,您没有附加生成的脚本。

<script>
var foo = 1;
var newScriptElem = document.createElement("script");
newScriptElem.innerHTML = `console.log(${foo});`;
document.body.append(newScriptElem);
console.log("loaded");
</script>

@Bergi提到的一个解决方案是调用eval(myJSCodeString),而不是将其添加为<script>块。

这样,代码将按原样执行,并且全局变量将可访问。

最新更新