要统计Flash被网友点击过的次数,需要使用JavaScript监听Flash的点击事件并发送统计数据。以下是完整攻略:
要统计Flash被网友点击过的次数,需要使用JavaScript监听Flash的点击事件并发送统计数据。以下是完整攻略:
步骤一:检测Flash是否存在
在HTML页面中,使用 object
或 embed
标签嵌入Flash对象,需要先判断Flash是否存在。
<div id="flashContainer">
<object type="application/x-shockwave-flash" data="flash.swf" id="flashObject">
</object>
</div>
var flashObject = document.getElementById('flashObject');
if (flashObject && flashObject.PercentLoaded() === 100) {
// Flash已加载完成
// 监听Flash的点击事件
flashObject.addEventListener('click', function() {
// 统计点击次数
// 发送AJAX请求
});
} else {
// Flash未加载完成,等待加载完成后再处理
flashObject.addEventListener('load', function() {
flashObject.addEventListener('click', function() {
// 统计点击次数
// 发送AJAX请求
});
});
}
步骤二:监听Flash的点击事件
Flash的点击事件是在 Flash 对象上触发的,而非在 HTML 页面上触发的。因此,需要在 JavaScript 中用 addEventListener()
监听 Flash 对象上触发的点击事件。
flashObject.addEventListener('click', function() {
// 统计点击次数
// 发送AJAX请求
});
步骤三:发送AJAX请求
在监听到Flash的点击事件时,需要向服务器发送统计数据。可以使用XMLHttpRequest()
发送一个AJAX请求。
var xhr = new XMLHttpRequest();
xhr.open('POST', '/path/to/statistics', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('OK');
}
};
xhr.send(JSON.stringify({
'flashId': 'flashObject',
'clicks': 1
}));
上述代码会向 /path/to/statistics
发送一个POST请求,并带上一个JSON对象。JSON对象包含了Flash对象的id和点击次数。服务端可以根据接收到的数据进行统计。
示例一:统计Flash被点击的次数
var flashObject = document.getElementById('flashObject');
if (flashObject && flashObject.PercentLoaded() === 100) {
// Flash已加载完成
// 监听Flash的点击事件
flashObject.addEventListener('click', function() {
// 统计点击次数
var xhr = new XMLHttpRequest();
xhr.open('POST', '/path/to/statistics', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('OK');
}
};
xhr.send(JSON.stringify({
'flashId': 'flashObject',
'clicks': 1
}));
});
} else {
// Flash未加载完成,等待加载完成后再处理
flashObject.addEventListener('load', function() {
flashObject.addEventListener('click', function() {
// 统计点击次数
var xhr = new XMLHttpRequest();
xhr.open('POST', '/path/to/statistics', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('OK');
}
};
xhr.send(JSON.stringify({
'flashId': 'flashObject',
'clicks': 1
}));
});
});
}
示例二:将统计结果展示在网页上
<div id="flashStatistics">
<p>Flash被点击了<span id="flashClicks">0</span>次。</p>
</div>
var flashObject = document.getElementById('flashObject');
if (flashObject && flashObject.PercentLoaded() === 100) {
// Flash已加载完成
// 监听Flash的点击事件
flashObject.addEventListener('click', function() {
// 统计点击次数
var xhr = new XMLHttpRequest();
xhr.open('POST', '/path/to/statistics', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 将统计结果展示在网页上
var flashClicks = document.getElementById('flashClicks');
flashClicks.textContent = parseInt(flashClicks.textContent) + 1;
}
};
xhr.send(JSON.stringify({
'flashId': 'flashObject',
'clicks': 1
}));
});
} else {
// Flash未加载完成,等待加载完成后再处理
flashObject.addEventListener('load', function() {
flashObject.addEventListener('click', function() {
// 统计点击次数
var xhr = new XMLHttpRequest();
xhr.open('POST', '/path/to/statistics', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 将统计结果展示在网页上
var flashClicks = document.getElementById('flashClicks');
flashClicks.textContent = parseInt(flashClicks.textContent) + 1;
}
};
xhr.send(JSON.stringify({
'flashId': 'flashObject',
'clicks': 1
}));
});
});
}
沃梦达教程
本文标题为:JS统计Flash被网友点击过的代码
猜你喜欢
- 无限分级和tree结构数据增删改【附DEMO下载】 2022-12-28
- 完美实现CSS垂直居中的11种方法 2022-11-13
- ajax实现城市三级联动 2023-02-24
- 基于Ajax和forms组件实现注册功能的实例代码 2023-02-15
- Vue使用vue-cli基于脚手架编写项目_自己编写一个vue基本_认识项目结构---vue工作笔记0019 2023-10-08
- HTTP中的Content-type详解 2022-09-21
- 使用Ajax模仿百度搜索框的自动提示功能实例 2023-02-23
- javascript – 如何通过AJAX将HTML5 sqlite结果集发送到服务器 2023-10-26
- js 剪切板应用clipboardData详细解析 2023-11-30
- vue-router的beforeRouteUpdate不触发 2023-10-08