Совместное использование глобальной переменной javascript страницы с помощью iframe на этой странице

Question

У меня есть сценарий, где у меня есть страница, которая имеет <script> тег и некоторые глобальные переменные JavaScript в этом. У меня также есть iframe на этой странице, и я хочу иметь доступ к глобальным переменным javascript страницы в iframe.

Возможно ли это?, если да, то как я могу это сделать?

Answer 1

Легко, вызвав parent.your_var_name в вашем скрипте iframe.

Одно условие: обе страницы (основная и iframe) должны находиться в одном домене.

Главная страница:

<script>
 var my_var = 'hello world!';
</script>

IFrame

<script>
  function some_fn(){
    alert(parent.my_var); //helo world!
  }
</script>

Answer 2

Невозможно, если iframe и основной документ не находятся в одном домене (из-за междоменной политики безопасности).

Чтобы обойти это ограничение, вы можете использовать междоменный обмен сообщениями.

Возможно, если основной документ iframe находится в одном домене, вы можете получить доступ к его глобальным переменным. Есть объект, который принадлежит объекту окна iframe или главной странице.

Вот код для доступа к переменной iframe myvar из основного документа (или iframe) в том же домене:

document.getElementById('iframeid').contentWindow['myvar'];

Answer 3

Отличные ответы выше. Просто добавьте, остерегайтесь этого в ES6:

 <script>
 const my_var2 = 'hello world!';
 let   my_var3 = 'hello world!';
 </script>

Если вы используете вышеупомянутое на главной странице, вы не можете ссылаться ни на my_var2, ни на my_var3 в iframe. Вы должны использовать 'var' для этого.

Это потому, что "const, let и class не создают свойств для глобального объекта".

СМ.: Как правильно написать глобальный констант в javascript es6?