postMessages добавить отправить слушатель события - PullRequest
0 голосов
/ 15 декабря 2018

У меня есть простая форма в HTML 5 с видео API, я хочу воспроизвести видео, когда пользователь нажимает кнопку отправки

, здесь приведен демонстрационный ввод формы HTML.

HTML 5

<form>
                    <div class="form-group">
                        <label for="name" class="cols-sm-2 control-label">E-mail</label>
                        <div class="cols-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                                <input type="email" class="form-control" name="name" id="email" placeholder="Enter email" />
                            </div>
                        </div>
                    </div>

                    <button type="submit" id="button" class="btn btn-primary btn-lg btn-block login-button">Submit</button>


                </form>

здесь js

// play a video after the user enter an input email works perfect
        $("input#email").on("change", function () {
            document.getElementById('videoframe').contentWindow.postMessage( "event=fieldchanged&fieldtype=" + "email" + "&value=" + $("input#email").val(), "*");
        });

        //play a video when a user clicks submit button this is not working !!!!!!!
        $("#button").on("click", function () {
            document.getElementById('videoframe').contentWindow.postMessage({
              event: "openSubmit"
            });
            console.log(openSubmit);
        });

Все отлично работает, кроме кнопки отправки.

Когда пользователь нажимает кнопку отправкине воспроизводит видео.

Что мне нужно изменить, чтобы добиться того, чего я хочу?

1 Ответ

0 голосов
/ 15 декабря 2018

postMessage принимает только строку для параметра сообщения.Вам нужно будет преобразовать объект в JSON перед отправкой.Пример:

document.getElementById('videoframe').contentWindow.postMessage(
  JSON.stringify({
    event: 'openSubmit'
  }),
  '*'
)
...