Разделительная JS от других 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 (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 и размещаете код в другом домене, области будут разделены. Затем вы можете передавать сообщения назад и вперед между родителем и iframe через службы обмена сообщениями между документами (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)