优雅地删除 div 之外的 html 内容答案

【问题标题】：Gracefully remove html content that is outside of div优雅地删除 div 之外的 html 内容
【发布时间】：2011-10-06 06:08:36
【问题描述】：

我正在使用谷歌翻译 API 将一些内容插入我的页面（一个下拉框），并且一些内容在任何 div 或其他元素之外，但我想将其删除。

<div class="skiptranslate goog-te-gadget" style="">   
 <div id=":0.targetLanguage">
  <select class="goog-te-combo">
  </select>
 </div>
 Powered by   // want to remove this

我尝试通过重新分配包含 div 的 innerHTML 来做到这一点，

     var body = document.getElementById("container");
     body.innerHTML = body.innerHTML.replace("Powered by", " ");

但这似乎重置/破坏了我需要保持完整的 API 的一些其他功能。

有没有更优雅的方式来做到这一点？

编辑 - 关于服务条款，如果不允许这样做，有谁知道我可以替代使用的开源 API 吗？

【问题讨论】：

如果我错了，请纠正我，但这不会违反服务条款吗？
我不确定。这更像是一个小工具，而不是完整的 API，这可能会有所不同。您知道任何具体的文档吗？

标签： javascript dom html google-translate

【解决方案1】：

如果你删除这样的东西，我相信你会侵犯许可协议，以及他们的欺诈行为。

请记住，Google Translate API 已弃用，取而代之的是付费服务。

如果您想要免费版本，最好的方法是忘记谷歌翻译服务，因为他们今年声明they will close 并使用其他免费服务，例如Bing Service。

【讨论】：

我通读了条款，但对我来说并不完全清楚。你知道它在哪里明确说明吗？我正在使用的或多或少只是一个下拉菜单来翻译页面上的所有内容（这是一个免费的 API）......我不确定今年 12 月 11 日是否将其关闭。还有这一行：从 API 返回的内容。如果您遵守这些条款，您可以存储和修改从 API 返回的内容。
Google 表示将关闭该服务以支持 v2。我从来没有读过任何相反的东西。您可以轻松地使用Bing Service，这就是我们正在做的事情。

【解决方案2】：

来自Google Translate API v1 documentation：

警告！此 API 要求在任何 API 输入附近显示出处框和结果显示，表明它是“Powered by Google”。如果您选择不使用 .getBranding()，您有义务自己提供这个品牌。

【讨论】：

【解决方案3】：

在四处寻找有关此事的一些信息时，我想出了以下内容：

您为什么不缩小“额外”的内容，以减少对您网站的干扰，但仍然比大多数合同底部的精美印刷品更清晰易读。因此，您应该遵守服务条款，不要放弃您页面上的太多空间。

这里有一点 CSS 魔法，应该可以在大多数浏览器上使用：

...

/* shrinks the entire contents of the GoogleTranslate main div to 70%, still readable */
#google_translate_element {
  zoom: .7;
  -moz-transform: scale(.7); /* FireFox understands this */
  -moz-transform-origin: 0 0;
}

/* within that, further shrink 'provided by' text, which affects the math elsewhere ... */
#google_translate_element div {
  font-size: 25%;
}

/* on hover of the select (drop down), make it a bit bigger, don't forget it was shrunk */
#.0.targetLanguage select:hover {
  font-size: 2250%; /* don't ask, it worked in Chrome & Safari, IE 8 (!) seemed ok too */ 
}

...

我使用“最新”的 Chrome、Safari、FireFox 和 MSie8 进行了快速测试，并使用以下工具将 Google 翻译显示在页面上：

...

<script>
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'en',
      gaTrack: true,
      gaId: 'UA-xxxxxxxx-x',
      layout: google.translateElement.InLineLayout.HORIZONTAL
    }, 'google_translate_element');
  }
</script>

<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

...

刚刚注意到 Windows 上的 FireFox 没有做下拉列表。但是如果没有上面的 CSS 技巧，它就有问题（！！）

使用数字和您最喜欢的浏览器来调整您的需求。

我想将水平线分成两条线以使其更加紧凑。这可能需要一些 JavaScript 或其他方式来解析并在正确的位置潜入
？也许使用与上面类似的方法来修改 Google 提供的其他布局之一。只要有标志，我们应该没问题……对吧？

玩得开心！

【讨论】：