#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.