Передайте переменную javascript от родителя к iframe

Я знаю, что мы можем передать переменную javascript из iframe в родительский фрейм следующим образом:

Если родитель и iframe находятся в одном домене, мы можем вызвать функцию родительского окна:

код фрейма:

window.postMe = "postMe value here";
window.parent.myFunction(postMe);

В родительском окне мы можем определить такую ​​функцию:

function myFunction(postMe) {
    ((console&&console.info)||alert)("postMe= " + postMe);
}

И приведенный выше код правильно регистрирует значение «postMe».

Но у меня вопрос, как изменить этот код, чтобы передать «postMe» от родителя к iframe?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
73
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы хотите продолжить использовать myFunction для родителя, вы можете сделать так, чтобы родительская функция принимала обратный вызов, переданный дочерним элементом:

window.postMe = "postMe value here";
window.parent.myFunction(postMe, (response) => {
  console.info(response);
});
function myFunction(postMe, callback) {
  const val = "postMe= " + postMe;

  // do something with val in parent:
  ((console&&console.info)||alert)(val);

  // do something with val in child:
  callback(val);
}

См. здесь живую демонстрацию (не может быть встроен в виде фрагмента стека из-за проблем с песочницей):

https://jsfiddle.net/kc24onbq/

Для односторонней связи от родителя к дочернему, получите доступ к contentWindow iframe от родителя:

// child
function childFn(val) {
  console.info(val);
}
// parent
iFrameElement.contentWindow.childFn('foo');

к сожалению, я не могу заставить его работать (первый код), не могли бы вы объяснить это подробнее?

Sara Ree 05.06.2019 08:26

Первая часть — это код, который должен быть в коде iframe, а второй — в родительском, верно?

Sara Ree 05.06.2019 08:27

Подождите... Я хочу передать postMe от родителя к iframe, верно? Поэтому мне нужна postMe как переменная внутри родительского кода... не в коде iframe... поправьте меня, если я ошибаюсь...

Sara Ree 05.06.2019 08:50

Вы спрашивали, как изменить существующий код, который имел postMe в iframe, и отправлял информацию родителю, что я и скопировал. Вы можете отправить ребенку что угодно, посмотрите на строку const val — все, что вы туда поместите, будет отправлено в iframe.

CertainPerformance 05.06.2019 08:55

Спасибо... ваш код отлично работает... Теперь я собираюсь опубликовать еще один вопрос по моей проблеме...

Sara Ree 05.06.2019 09:05

Не могли бы вы взглянуть на это обсуждение здесь:

Sara Ree 05.06.2019 10:05
stackoverflow.com/questions/56456068/…
Sara Ree 05.06.2019 10:05

Другие вопросы по теме