全局函数在使用 jquery .load() 加载的 html 范围内未定义

Question

我有 html ：

<script src="/js/app.js"></script>

在 app.js 我有函数 foo:

function foo() { console.log("foo") }

然后我有 jquery 并使用它的方法 .load 来加载外部 html 内容：

$("#modal-wrapper").load("/modal_dialog_ajax", function () {
   // Some logic
});

/modal_dialog_ajax 的输出如下所示：

<div>Some markup</div>
<script type="text/javascript">
 foo();
</script>

Javascript 执行良好，但在此 html 范围内未定义 foo() 的调用。

为什么js里面ajax加载的html内容看不到页面上定义的全局函数？

Answer 1

使用窗口全局对象解决此问题：

function foo() { console.log("foo") }
window.foo = foo;

然后称它为

window.foo();

但不确定这是一个好习惯。