Вызвать кнопку iframe с родительской страницы MVC

Итак, у меня есть iframe на странице моего приложения (разные домены), где iframe имеет несколько полей и скрытую кнопку, на которой есть событие click для выполнения всех необходимых действий (например, операции CRUD). Сообщение вызывается через ajax, поэтому в iframe нет метода POST. На родительской странице есть кнопка, которую следует использовать при нажатии, чтобы вызвать событие щелчка внутри iframe. Я просмотрел postMessage и перекрестное происхождение и смог найти что-то, что я реализовал в своем решении. С учетом этого, когда я нажимаю кнопку на родительской странице, ничего не происходит. Я не вижу никакой ошибки консоли, но ничего не срабатывает. Это то, что у меня есть в моем коде.

<div id = "main">
<iframe id = "cardIframe" src = "@($"https://localhost:44320/handlers?userId = {Model.UserId}")"
        width = "100%" height = "300px" style = "border: none;" scrolling = "no"></iframe>
<hr class = "mb-4" />
@Html.UI().Button("Continue to Checkout", size: UIElementSize.Block, uiClass: UIElementClass.Primary, htmlAttributes: new { @class = "checkoutsubmit" })

    <script type = "text/javascript">
        $('.checkoutsubmit').click(function (e) {
            var iframe = document.getElementById('cardIframe').contentWindow;
            window.iframe = iframe;
            iframe.postMessage("createvault", "*");
        });
    </script>

И в моем приложении iframe (http://локальный:43402)

<script type = "text/javascript">
window.addEventListener("click", clickEvent, false);

                function clickEvent(event) {
                    $('.processbraintree').trigger('click');
                }
                $('.processbraintree').click(function(e) { 
                    ..Do something
                });
                </script>

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

У вас нет прослушивателя событий для message from postMessage в коде iframe. Можно также предположить, что iframe не определено из-за "такая же политика происхождения"

charlietfl 21.02.2019 23:11

поэтому в моем iframe мне нужно добавить прослушиватель для почтового сообщения... что-то вроде window.addEventListener("createvault", clickEvent, false);

bladerunner 21.02.2019 23:16

Документы помогут developer.mozilla.org/en-US/docs/Web/API/Window/postMessage. Посмотрите на примеры

charlietfl 21.02.2019 23:19

Итак, я обновил прослушиватель в iframe до «сообщения» вместо щелчка. Теперь проблема, с которой я сталкиваюсь, заключается в том, что когда я помещаю курсор в одно из полей iframe, он вызывает событие нажатия кнопки. Я хочу вызвать его, когда нажму кнопку на родительской странице. Похоже, слушатель работает, но не тогда, когда я хочу.

bladerunner 21.02.2019 23:25
Поведение ключевого слова "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
4
41
0

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