在同一HTML文档中将JS与其他JS隔离

Question

考虑以下代码：

<script>var foo = 'bar';</script>
<div id='isolated'>
    <script>console.log(foo)</script>
</div>

这会将'bar'返回到控制台。不过我希望foo以及在#isolated之外宣布的任何其他变量都来自undefined。

如何实现这一目标？跨浏览器，轻量级和本机解决方案将是更可取的。

Answer 1

这不是JavaScript的工作方式。由于HTML元素块，它不会自行调整范围。

您在全局范围内声明foo，只需在范围内声明它只在需要时使用。使用ES6（Harmony），使用let而不是var（建议，不完全支持）来声明变量提出块级变量而不是全局范围变量。

尽管如此，除非你使用某种逻辑，否则JavaScript不知道foo被记录在隔离的div中。

Answer 2

尝试将代码包装在函数中的第一个<script></script>标记之间。

<script>(function fn(){var foo = 'bar';})();</script>
<div id='isolated'>
    <script>console.log(foo);</script>
</div>

这将导致您声明的任何变量在此函数的上下文中生效。在此功能之外无法访问它们。

Answer 3

如果您在iframe中加载已隔离的代码并将代码托管在其他域中，则范围将被分开。然后，您可以通过跨文档消息传递服务（https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage）在父节点和iframe之间来回传递消息