Изоляция 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).