<p>我有一个项目,在这个项目中,我需要使网站响应而不接触任何html标记和编程代码,我唯一能修改的就是一个样式表和一个javascript文件。我甚至不知道哪个是网站的所有页面,因为这对我来说是一个新项目。在</p>
<p>所以我们的目标是让它具有响应性,这样googlecrawler就不会惩罚这个网站。在</p>
<p>所以我知道我可以手动使用<a href="https://www.google.com/webmasters/tools/mobile-friendly/" rel="nofollow">https://www.google.com/webmasters/tools/mobile-friendly/</a>来测试我想测试的页面。但是我怎么能测试整个网站呢?在</p>
<p>好吧,我所做的是要求一个网站管理员工具导出最重要的网站链接,数百个。在</p>
<p>然后我构建了一个小的“工具”,它可以做我认为Google Responsive Test所做的事情,但是这个工具会接受一个url列表,如果它们适合320px的屏幕(iframe),它会循环并测试每个url。在</p>
<p>这是你刚刚打开的HTML工具,在文本框中输入URL,然后点击Start!(响应检查器.html)在</p>
<pre><code><!DOCTYPE html>
<!
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
>
<html>
<head>
<title>Responsive Checker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://www.google.com/jsapi"></script>
<script>
var urls;
var delay=3000;
google.load("jquery", "1");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
console.log('jquery loaded');
$('#responsiveFrame').load(function(){
if (urls.length > 0) {
setTimeout(function(){ checkUrl(); }, delay);
}
});
});
function startChecking() {
var textUrls=$('#urls').val();
urls= textUrls.match(/[^\r\n]+/g);
checkUrl();
}
function checkUrl() {
var url;
if (urls.length > 0) {
url=urls[0];
console.log("checking: "+url);
$('#responsiveFrame').attr('src',url+'#rc=1');
urls.splice(0, 1);
} else {
console.log("no more urls");
}
}
</script>
</head>
<body>
<iframe id="responsiveFrame" width="320" height="480" src="about:blank" style="border: 1px solid red;" scrolling="no"></iframe>
<p>
<label for="urls">Enter URLs to check, one per line:</label><br />
<textarea id="urls" rows="30" cols="100"></textarea>
</p>
<p>
<input type="button" value="Start checking!" onclick="startChecking();">
</p>
</body>
</html>
</code></pre>
<p>此脚本必须加载并在要检查的网站上运行:</p>
^{pr2}$
<p>将以下内容放在jquery ready的末尾:</p>
<pre><code>responsiveChecker.check();
</code></pre>
<p>最后,它是如何工作的:</p>
<ol>
<li>在要检查的网站上添加responsiveChecker javascripts</li>
<li>你打开响应检查器.html文件,在文本区域添加站点的url并点击Start</li>
<li>它将开始逐个加载iframe中的url,并在浏览器的Console选项卡上记录一个“success”、“warning”或“error”,这意味着它要么响应,要么可能响应,要么没有响应。在</li>
</ol>
<p>告诉我你的想法!在</p>
<p>顺便问一下,如果我们清理它并建立一个真正的实时工具/服务,人们可以用来测试他们的网站的响应能力,有人认为这会有用吗?在</p>
<p>顺便说一句:实际的检查是用jQuery完成的,通过测试页面中宽度小于或等于320px的所有元素。事实上,这并不是百分之百的保证,但我认为谷歌的机器人可能正在做类似的事情,但我相信它更复杂。在</p>