隔離JS相同的HTML文檔

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（和諧），使用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中，並將代碼託管在其他域中，則範圍將被分隔。然後，您可以通過跨文檔消息服務在父代和iframe之間來回傳遞消息（https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage）