Question

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

Answer 1

这很难做到。你很难以可以在任何网站上工作的方式可靠地做到这一点，甚至是你无法控制的网站。

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

Answer 2

它看起来有解析DOM并将它们渲染到画布的技术，这些技术在这里被引用Using HTML5/Canvas/JavaScript to take screenshots

当您获得画布时，您可以开始扫描像素，以查找全部为一种颜色的屏幕部分。

另请参阅：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”的价值是什么？难道它不会增加额外的混乱并使事情看起来有点不对吗？

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

3 个答案: