postMessages添加提交事件侦听器

Question

我有一个简单的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);
});

除了提交按钮之外，一切都很完美。

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

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

Answer 1

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

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