场景:抢红包,可以发送弹幕,且发送弹幕和抢红包一个页面上。
把input框弹幕写一个页面,就一个文本框即可。danmu.html
<!DOCTYPE html><html lang="en" xmlns:th="/1999/xhtml"><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="blank" /><link rel="stylesheet" type="text/css" href="static/css/index.css"/><script src="http://res./open/js/jweixin-1.4.0.js"></script><script src="static/js/jquery.min.js"></script><style>#dandan{width:95%;}</style></head><body><input type="text" value="" id="dandan" maxlength="20"/></body><script></script></html>
在抢红包页面 index.html相应的地方引入danmu.html页面
<iframe src="danmu.html" width="100%" id="input-dandan" frameborder="0"></iframe>
点击发送弹幕按钮的方法里,父页面获取子页面的元素,js如下,获取发送弹幕的内容
var dandanval = $("#input-dandan").contents().find("#dandan").val();
当弹幕发送成功后回调函数里可以重新加载一遍danmu.html页面
$("#input-dandan").attr('src', "danmu.html");
完美解决。