Как динамически изменять размер iframe React, встроенного в веб-сайт wordpress?

#javascript #reactjs #wordpress #iframe

#язык JavaScript #реагирует на #wordpress #фрейм

Вопрос:

У меня есть приложение react, которое будет встроено в виде iframe на веб-сайте WordPress. Iframe будет содержать динамическое содержимое, поэтому размер может измениться. Мне было интересно, есть ли какой-нибудь способ сделать это?

Я проверил iframe-resizer-react, но это, похоже, плагин для приложения react в качестве хоста, в то время как мое приложение react-это контент, а wordpress-хост для iframe.

РЕДАКТИРОВАТЬ: В данный момент я пытаюсь встроить этот Iframe React в простой html-файл (не начал вносить изменения в wordpress, так как я не имею большого представления). Пытаюсь использовать плагин iframe-resizer, так как это кажется наиболее полезным.

Вот как выглядит мой хост (родительский) образец html. Просто тестирую с html, так как я решил, что добавление js в wordpress должно быть похожим.

 lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt;  lt;titlegt;Parent pagelt;/titlegt;  lt;stylegt;  iframe {  width: 1px;  min-width: 100%;  }  lt;/stylegt; lt;script scr="./js/iframeResizer.min.js"gt;lt;/scriptgt; lt;/headgt; lt;bodygt;  lt;h1gt;This is the parent pagelt;/h1gt;  lt;iframe src="http://localhost:3000/" id="myIframe" scrolling="no"gt;lt;/iframegt; lt;/bodygt;   lt;scriptgt;  iFrameResize({ log: true }, '#myIframe') lt;/scriptgt; lt;/htmlgt;  

И в index.html в приложении react я попытался добавить следующее:

 lt;script src="./iframeResizer.contentWindow.min.js"gt;lt;/scriptgt;  

Но это просто выдает ошибку на родительской странице, test.html:20 Uncaught ReferenceError: iFrameResize is not defined

Комментарии:

1. Дайте дополнительную информацию о странице wordpress, на которой находится iframe (код, используемый редактор страниц, если таковой имеется…). Кроме того, расскажите нам, что вы пытались решить свою проблему.

2. Обновил вопрос. Я ничего не делал на wordpress, как вы можете видеть в вопросе выше. Попытка встроить iframe react в простой html и использование средства изменения размера iframe.

3. Вы ввели scr вместо src при импорте iframeResizer.min.js .

4. Да, теперь это исправлено. Это решило проблему. Теперь попытаемся встроить то же самое в wordpress.