我网站上的 Google 天气小部件答案

【问题标题】：Google weather widget on my website我网站上的 Google 天气小部件
【发布时间】：2014-06-05 20:18:54
【问题描述】：

我想在我的网站上显示天气。我查看了我可以在网上找到的所有天气小部件，没有一个看起来像我在谷歌上看到的那样酷（当我搜索我所在城市的天气时），我找不到任何关于如何将它嵌入我的网站的文档。

我想知道是否有任何方法可以在我的网站中插入确切的 google 小部件。（我搜索天气时看到的那个）

还有另一种调用服务和构建整个小部件的选项，我查看了一些可用的 API，看起来工作量很大（雅虎 API 返回 30 种不同的天气状态。）这是出于教育目的，所以我不打算花这么多时间。

如果有人使用过谷歌天气小部件，请告诉我。

【问题讨论】：

标签： javascript web widget

【解决方案1】：

我能够使用这些技巧嵌入 Google 的天气小部件：

igu=1 查询参数允许在 iframe 中嵌入 google，但无需用户登录。
将 iframe 包装在一个 div 中以将其裁剪为仅天气小部件。
我添加了缩放悬停变换效果，使小部件在页面上占用的空间更少。

注意事项：

由于用户无法登录，因此天气位置可能不太准确。
裁剪偏移量可能取决于浏览器。
它可能对辅助功能不友好。
需要对其进行调整才能在移动浏览器上正常工作。

.google-weather-place {
    width: calc(655px/2); height: calc(450px/2);
}
.google-weather-crop {
    width: calc(655px/2); height: calc(450px/2);
    overflow: hidden;
    transition: 0.3s;
    position: absolute;
}
.google-weather-crop:hover {
    width: 655px; height: 450px;
}
.google-weather {
    position: relative;
    left: -180px; top: -180px;
    width: 2560px; height: 5120px;
    transform: scale(0.5);
    transform-origin: 180px 180px;
    transition: 0.3s;
    position: absolute;
}
.google-weather:hover {
    transform: scale(1);
    z-index: 1000;
}

<h1>Google Weather Embed</h1>
<div class="google-weather-place">
<div class="google-weather-crop">
<iframe class="google-weather" src="https://www.google.com/search?igu=1&amp;q=weather">
</iframe>
</div>
</div>
<p>Caveat: The google search option <code>igu=1</code> logs out the user,
so the location may be less accurate.</p>

【讨论】：

【解决方案2】：

Google 天气信息框是搜索结果页面的一部分，因此无法独立获取 (AFAIK)。

可以从结果页面中提取信息。这可以在 Web 服务器或浏览器（JavScript 或扩展/插件）中完成。应该可以将 Google 页面嵌入到另一个 (<iframe>) 中，然后删除除天气数据之外的所有内容。这是get JQuery 和hide everything except 天气箱的一小段JavaScript：

var script = document.createElement('script');script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(script);
$('#wob_wc').show().parentsUntil('body').andSelf().siblings().hide();

这两行可以在 JavaScript 控制台中运行（在 Firefox 中测试）。该框与页面顶部和左侧边缘有一点偏移。

这两行可以用作书签（在当前页面上运行上述行的链接），但是，尽管如此，我不能让它工作尝试wait until JQuery is loaded:

javascript:(function(){
  var script=document.createElement('script');
  script.src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js";
  document.getElementsByTagName('head')[0].appendChild(script);

function defer() {
    if (window.jQuery)
        method();
    else
        setTimeout(function() { defer(method) }, 50);
}

function method(){
$('#wob_wc').show().parentsUntil('body').andSelf().siblings().hide();
}

defer();
})();

【讨论】：

Google 不允许您将其搜索嵌入到 iframe 中