使用 javascript 或 jQuery，我如何检测未使用的“空白”屏幕房地产？

Question

例如，stackoverflow 网站以填充我 1920x1200 屏幕宽度的“空白”为中心。 我正在尝试查找 javascript 或 jQuery 代码来检测任何网站上可用空白的位置，并用图像或 div 填充或覆盖它。 这甚至可能吗？

Answer 1

这将是非常难以做到的。 您将很难以一种可以在任何网站上运行的方式可靠地完成它，即使是您无法控制的网站。

你可以做的是遍历整个 DOM 并找出每个可见元素占据的矩形 - 但是你如何定义可见的？ 有时你看到的空白是一个带有白色背景的 div，它位于其他 div 的顶部，有时你看到的是裸露的身体元素，有时它是略呈灰白色或不同的颜色等。

Answer 2

它看起来有用于解析 DOM 并将它们呈现为 canvas 的技术，这些技术在此处引用Using HTML5/Canvas/JavaScript to take screenshots

在您获得 canvas 之后，您可以开始扫描像素以查找全是一种颜色的屏幕部分。

另见： https://github.com/niklasvh/html2canvas

Answer 3

当前最佳解决方案：

$(document).ready(function() {
   loadWhiteSpaceDetector()
});

function loadWhiteSpaceDetector() {

   alert("Dear user, please 'see' the whitespace and decide what to do since
 as a program I'm unable to do it. It's a hard problem. But the human brain can
 differentiate between wasted and real estate irrespective of "color" I can only 
 detect white since you asked me to. But @thomasrutter pointed out A LOT of flaws 
 with my approach.");


}

这适用于任何浏览器:)

笑话不谈，但这很难做到，因为你真的不知道空格 = 空白还是浪费的空间（或者 = 黑色空间或紫色空间）。 问题不是检测空白是否更重要，而是在屏幕上显示“div/image”有什么价值？ 它不会增加额外的混乱并使事情看起来有点不对劲吗？