установка переменной перекрестного происхождения в iframe - PullRequest
Новая
       155

установка переменной перекрестного происхождения в iframe

0 голосов
/ 29 мая 2020

Я встраиваю форму на странице оформления заказа с iframe, и я пытаюсь взять цену корзины и автоматически ввести ее в поле суммы. значение переменной корзины кажется $("span[data-test='cart-price-value']").innerText;, когда я проверяю его в консоли, но я не понимаю, должен ли я устанавливать переменную в скрипте, который встраивает iframe, или в сам iframe html, или нет Мне нужно сделать и то, и другое, и добавить слушателя jquery в iframe html

, а также мне нужно обрезать '$' из переменной, потому что $("span[data-test='cart-price-value']").innerText; возвращает значение со знаком доллара перед ним, например, «435,66 долларов», и мне нужно, чтобы это было просто «435,66», любая помощь будет оценена

1 Ответ

1 голос
/ 30 мая 2020

Здесь есть несколько вещей -

Браузеры имеют довольно строгие ограничения на фреймы с перекрестным происхождением. Вы не сможете взаимодействовать между BigCommerce Checkout по одному URL-адресу и iframe, размещенным на другом URL-адресе - если их происхождение отличается.

Если вы попытаетесь использовать JavaScript из B C на странице проверки, чтобы установить значение ввода формы, встроенного в iframe, вы получите предупреждение системы безопасности в консоли, и браузер его не разрешит.

Однако есть API, который позволяет эту связь - вы можете прочитать больше здесь:

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Вы собираетесь отправлять и прослушивать пользовательские события «сообщения» и запускать код соответственно.

Я не на 100% в этом вопросе, но, судя по тому, как это звучит, вы захотите использовать Window.postMessage () для iframe / origin, размещающего внешнюю форму, и отправить цену, которую вам нужно ввести.

На странице, которая обслуживает код iframe / формы, вам понадобится прослушиватель событий, чтобы ждать прихода этого сообщения, и тогда у вас может быть обработчик событий, который будет принимать переданное значение ng в сообщении с кросс-источником и измените входное значение формы.

Теперь, с точки зрения фактической реализации этого, это также станет более сложным в зависимости от того, какой тип страницы оформления заказа вы размещаете. Используете ли вы оптимизированную одностраничную проверку (новую?) Если да, вам, вероятно, понадобятся прослушиватели мутаций, поскольку OP C - это внешнее приложение React, и вы не можете подключиться к внутреннему состоянию, вам нужно использовать прослушиватели мутаций, чтобы дождаться загрузки каждого раздела (сведения о клиенте, сведения о доставке, сведения о выставлении счетов, этап оплаты) - поскольку они обновляются с использованием внутреннего состояния реакции, к которому вы не можете получить доступ из сценариев BC / stencil / cornerstone / blueprint.

Подробнее об этом здесь: https://medium.com/bigcommerce-developer-blog/the-complete-guide-to-checkout-customization-on-bigcommerce-6b566bc36fa9

Если вы используете старую версию оформления заказа, где вы можете вручную изменить структуру JS и HTML кассы, которую обслуживает B C, вам это может не понадобиться.

...