innerHTML的一个奇怪问题

本文描述了一个关于在Internet Explorer浏览器下使用Ajax更新页面内容时遇到的问题及解决方案。作者最初尝试直接更新一个被CSS定义过的元素的内容,但在IE中遇到了阻塞问题。通过更改目标元素的ID并避开原有CSS定义,成功解决了该问题。
背景:使用ajax翻页

起初代码是这样的:

页面:
<div id="comment"><#include "/cn/videoplay/comment/listcomment.ftl"></div>

ajax:
$('comment).innerHTML = originalRequest.responseText;

在firefox下是好的,在IE下页面会挂在那不动,经检测ajax请求和相应都没问题,执行$('comment).innerHTML = originalRequest.responseText;就出了问题。

搞了半天也没搞出个所以然,无奈之下采用如下策略
页面:
<div id="comment"><div id="commentx"><#include "/cn/videoplay/comment/listcomment.ftl"></div></div>

ajax:
$('commentx').innerHTML = originalRequest.responseText;

问题解决了,但为什么会这样还是不知道,仅仅知道<div id="comment">中的comment在css文件中定义了,难道css定义了ID,执行$('comment).innerHTML = originalRequest.responseText;就会出错?其实originalRequest.responseText为很简单的字符串时不会出错,但一旦稍微复杂一点就会有问题.



### 页面结构设计 直播页面的整体结构应包括以下几个主要部分:直播播放区域、互动聊天区域、用户信息展示区域、直播相关信息展示区域以及控制栏。页面采用响应式布局,以适配不同设备的访问需求。 #### 直播播放区域 直播播放区域是页面的核心部分,用于展示实时视频流。可以使用 `videojs` 播放器,它支持多种视频格式,包括 HLS 和 DASH,能够很好地兼容主流直播协议。根据已有经验,只需简单配置即可快速集成[^1]。示例代码如下: ```html <video id="demo-video" class="video-js vjs-default-skin" controls> <source src="your-stream-url.m3u8" type="application/x-mpegURL"> </video> <script src="https://vjs.zencdn.net/7.20.1/video.min.js"></script> <link href="https://vjs.zencdn.net/7.20.1/video-js.css" rel="stylesheet"> <script> const myPlayer = videojs('demo-video', { html5: { hls: { overrideNative: true } }, bigPlayButton: true, textTrackDisplay: true, posterImage: true, errorDisplay: true, controlBar: true }); </script> ``` #### 互动聊天区域 互动聊天区域允许观众与主播进行实时互动,提升直播体验。该区域通常位于播放器的右侧或下方,支持发送文字消息、表情、礼物等。聊天功能可以通过 WebSocket 实现实时通信,结合后端服务进行消息广播。 #### 用户信息展示区域 该区域展示当前直播的主播信息,包括头像、昵称、粉丝数、直播标题等。这些信息可以从直播服务接口获取,如以下结构所示[^3]: ```json { "AppName": "xchen", "DomainName": "test101.cdnpe.com", "PublishTime": "2015-12-02T06:58:04Z", "PublishUrl": "rtmp://test101.cdnpe.com/xchen", "StreamName": "testxchen" } ``` #### 控制栏 控制栏提供基础的播放控制功能,如暂停、音量调节、全屏切换等。此外,还可以加入“关注”、“分享”等社交互动按钮,增强用户粘性。 --- ### 样式与交互设计 #### 响应式布局 页面采用 Flex 布局,确保在不同设备上都能良好显示。移动端适配时,聊天区域可折叠,播放器自动进入全屏模式。 #### 动态交互 通过 JavaScript 实现动态交互,如点击“关注”按钮后,按钮状态变更并发送请求至后端记录关注行为;点击“分享”按钮后,弹出分享链接或二维码。 #### 主题与视觉风格 整体风格应简洁现代,播放器区域使用深色背景以增强视频观感,聊天区域采用浅色背景以便于阅读。按钮使用圆角设计,增强点击感。 --- ### 技术实现建议 #### 前端技术栈 - **HTML5 + CSS3**:构建页面结构与样式 - **JavaScript + jQuery**:处理页面逻辑与交互 - **Video.js**:实现直播播放功能 - **WebSocket**:实现聊天室实时通信 #### 后端接口 - 提供直播流信息接口,如流名、推流地址等[^3] - 提供用户互动接口,如关注、分享、发送消息等 #### 第三方服务 - 使用 CDN 提供直播流加速服务 - 使用 IM 服务实现聊天功能(如腾讯云 IM、阿里云 IM 等) --- ### 示例页面结构代码 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>直播页面</title> <link href="https://vjs.zencdn.net/7.20.1/video-js.css" rel="stylesheet"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; height: 100vh; } .header { background: #333; color: #fff; padding: 1rem; } .main { display: flex; flex: 1; overflow: hidden; } .video-container { flex: 3; padding: 1rem; background: #000; } .chat-container { flex: 1; border-left: 1px solid #ccc; padding: 1rem; overflow-y: auto; background: #f9f9f9; } .controls { display: flex; justify-content: space-between; padding: 1rem; background: #eee; } </style> </head> <body> <div class="header"> <h1>直播标题</h1> <p>主播:测试主播 | 粉丝数:10000</p> </div> <div class="main"> <div class="video-container"> <video id="demo-video" class="video-js vjs-default-skin" controls> <source src="your-stream-url.m3u8" type="application/x-mpegURL"> </video> </div> <div class="chat-container"> <div id="chat-messages"></div> <input type="text" id="chat-input" placeholder="输入消息..." /> <button onclick="sendMessage()">发送</button> </div> </div> <div class="controls"> <button onclick="toggleFollow()">关注</button> <button onclick="shareStream()">分享</button> </div> <script src="https://vjs.zencdn.net/7.20.1/video.min.js"></script> <script> const myPlayer = videojs('demo-video', { html5: { hls: { overrideNative: true } }, bigPlayButton: true, textTrackDisplay: true, posterImage: true, errorDisplay: true, controlBar: true }); function toggleFollow() { alert('关注成功'); } function shareStream() { alert('分享链接已复制到剪贴板'); } function sendMessage() { const input = document.getElementById('chat-input'); const message = input.value; if (message) { const chat = document.getElementById('chat-messages'); chat.innerHTML += `<div>${message}</div>`; input.value = ''; } } </script> </body> </html> ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值