热图 - 如何从浏览器中添加服务器端代码答案

【问题标题】：Heatmap - How to add server-side code from within the browser热图 - 如何从浏览器中添加服务器端代码
【发布时间】：2013-05-17 05:58:21
【问题描述】：

我们在工作中使用热图（它是安全的，所以我不能在这里发布它，我当然不能提供网址）。现在热图是一个单一的图像，但它可以在不同的段上点击 - 地图上有不同的图标，每个图标都会弹出一个不同的窗口（所以它不仅仅是整个图像的单击事件）......

现在这张地图是由一个叫Whatsup Gold的程序生成的，而且肯定不是Flash...

地图会持续监控线路连接活动 - 当互联网线路出现故障时，绿色图标变为红色。地图每隔几分钟刷新一次...

我想知道的：有没有办法，无论是使用浏览器插件、Javascript 还是任何其他方法，都可以通知我地图状态已更改（地图上的任何更改），而无需打开每次浏览器窗口？

这是地图标记的一部分……（整个地图）

<a href="mappickhost.asp?map=WhatsUpTL.wup">
   <img border="0" src="WUG1.jpg" ismap="">
</a>

更新：

请求和响应标头（从 Firebugs 网络选项卡中检索）

请求：

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Encoding:    gzip, deflate

Accept-Language:    en-US,en;q=0.5

Authorization:  Basic dGxpbms6dGxpbms=

Cache-Control:  max-age=0

Connection: keep-alive

Host:           ***************

回应

Cache-Control   no-cache

Content-Type    image/jpeg

Date    Fri, 17 May 2013 07:06:30 GMT

Expires Mon, 17 Jul 1980 20:00:00 GMT

Pragma  no-cache

Server  WhatsUp_Gold/8.0

【问题讨论】：

您可以在 Chrome 或 FireFox 中检查控制台以查看它连接到什么（我猜是 xhr 请求）。检查响应（我猜它是 JSON 或 xml）。然后用您想要连接到该服务的任何语言编写桌面/控制台应用程序。如果它需要身份验证和会话 cookie，可能会出现问题，这使得编写变得非常困难。
感谢您的回复..“看看它连接到什么”...我怎么看？我只能看到地图连接的链接，它发布在我上面的代码中......
我添加了一个带有 Firebug 屏幕截图的答案，检查 JavaScript 正在做什么或更改样式和操作 html 元素非常方便。如果您还没有使用过它，我建议您熟悉它，因为您将节省大量时间来尝试弄清楚事情是如何工作的或它们停止工作的原因。
我看到你更新了你的问题。这是页面及其图像的初始加载，还是页面及其所有图像都已加载后与某处的重复连接？我可以看到页面或服务具有基本身份验证，因此无论您要为其编写的任何应用程序都必须通过设置请求标头来实现它：en.wikipedia.org/wiki/Basic_access_authentication

标签： javascript browser monitoring network-monitoring

【解决方案1】：

我在 firefox 中添加了 firebug 控制台的屏幕截图（按 F12 打开）。我执行了一个 xmlhttprequest（底部的线），您可以看到（黑线）它连接到 stackoverflow。 Firebug 默认在控制台中显示 xhr 连接，但您可以通过单击激活控制台的选项卡中“控制台”一词右侧的小箭头按钮来选择要查看的内容。

即使使用 StackOverflow 打开控制台也表明该站点经常连接以更新问题状态和 cmets。

如果那里什么都没有显示，那么它可能会显示在“网络”选项卡中。它必须与某个地方建立连接以查看网络是否仍在运行。如果它连接到服务，那么 xhr 很可能只是尝试下载文本文件或设置图像的 src，而不是每次检查时它只会显示在 net 选项卡中。

【讨论】：

谢谢。所以你的意思是每次热图发生变化时都应该发布一个新图像？因为地图上的所有内容都包含在一张图片中……所以我们基本上可以为图片设置一个事件监听器，看看图片什么时候发生变化？但是如果图像被覆盖为相同的文件名，你怎么知道它是一个新图像？
不，你完全没有抓住重点。图像可能由 javascript 设置或修饰，并且 javascript 连接到将列出网络可用性的服务。您是否检查过控制台，是否看到页面加载完成后发出请求的页面？
哦，我明白了。不，我对控制台的高级功能不太熟悉。也许我应该开始学习它......我会看看并回到你身边
@DextrousDave 你有运气搞清楚吗？我的猜测是它使用 xmlhttprequest 到某个服务器，该服务器将报告然后 JS 将更新图像。如果是这种情况，您可以在 firebug 控制台中看到请求。打开stackoverflow时应该是一样的，按F12并等待几分钟。 SO 也经常与 xmlhttprequests 连接。
酷男。找到了。每分钟，由“http-equiv="REFRESH"" 元标记设置，都有一个请求。我如何查看它是什么类型的请求？我在 Firebug 的“标题”选项卡下的“接受”标签下找到以下内容 - 接受：text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8

【解决方案2】：

我们在工作中使用热图（它是安全的，所以我不能在这里发布它，我当然不能提供网址）。现在热图是一个单一的图像，但它可以在不同的段上点击

肯定是引起交互的不仅仅是图像。普通图像无法做到这一点。如果它不是 Flash，那么它可能是 JavaScript 为它提供动力。必须有一些库，并且它可能有一个 API。我建议你开始阅读文档（如果有的话）。

地图持续监控线路连接活动

这可以通过多种方式完成，最常见的是轮询 AJAX 或 Web Sockets。要检查这一点，您可以查看浏览器调试器的网络选项卡。如果有支持的 API，可以先去看看，省去调试实现的麻烦。

如果不存在 API，请检查请求并找到复制它的方法。一旦您可以复制它或使用 API，您就可以创建您的插件或为其创建自定义应用程序。

【讨论】：

是的，文档可能是个好主意……看看我能不能找到一些。网络标签？您指的是哪个网络标签？
浏览器调试器的@DextrousDave。
查看我对这个问题的更新。此外，热图显示为单个图像，所以我猜每当地图上的某些内容发生变化时，都会重新生成图像并将新图像插入到 DOM 中。还是我的假设是错误的？
@DextrousDave 你可能是对的。可能是地图图像由服务器定期生成，并由浏览器定期刷新。交互由 JS 完成。如果我们只看到一个演示，我们实际上可以提出一个更合适的解决方案。
是的，我明白，但即使我在此处发布了链接/演示，您也无法访问它 - 非常安全 - 对公司网络外的任何 PC 进行了严格的防火墙保护