場景:搶紅包,可以發送彈幕,且發送彈幕和搶紅包一個頁面上。
把input框彈幕寫一個頁面,就一個文本框即可。danmu.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/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.wx.qq.com/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");
完美解決。