javascript - postMessages 添加提交事件监听器

Question

我有一个带有视频 API 的 HTML 5 简单表单，我想在用户单击提交按钮时播放视频

这里是演示 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);
        });

除了提交按钮之外，一切都运行良好。

当用户单击提交按钮时，不会播放视频。

为了实现我想要的目标，我需要改变什么？

Answer 1

postMessage消息参数仅接受字符串。在发送之前，您需要将对象转换为 JSON。示例:

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