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

发布于 2024-12-08 16:43:09 字数 607 浏览 1 评论 0原文

我正在使用谷歌翻译 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吗？

原文

I'm using the google translation API that inserts some content into my page (a dropdown box) and some of the content is outside of any div or other element, but I want to remove it.

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

I attempted doing so by reassigning the innerHTML of the containing div,

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

But this seems to reset / break some other features of the API that I need to keep intact.

Is there a more graceful way of doing this?

EDIT - Regarding terms of service, if this isn't allowed, does anyone know of an open source API I can alternatively use?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

被翻牌 2024-12-15 16:43:09

如果您删除这样的东西，我确信您将违反许可协议，并犯下欺诈行为。

请注意，Google Translate API 已弃用支持付费服务。

如果您想要免费版本，最好的方法是忘记 Google 翻译服务他们将在今年关闭它并使用其他免费服务，例如必应服务。

回复收藏 0 原文

烏雲後面有陽光 2024-12-15 16:43:09

来自 Google Translate API v1 文档：

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

回复收藏 0 原文

仙女山的月亮 2024-12-15 16:43:09

在四处寻找有关此事的一些信息时，我得出以下结论：

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

下面是一些 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 提供的其他布局之一。只要标志在那里，我们就应该没问题......对吗？

玩得开心！

In looking around for some information on the matter, I came up with the following :

Why don't you just shrink the 'extra' stuff to make it less intrusive on your site but still more legible than fine print at the bottom of most contracts. Thus you should stay compliant with the service's terms and not give up too much real estate on your page.

Here's the bit of CSS magic which should do the trick on most browsers :

...

/* 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 */ 
}

...

I did a quick test using 'latest' Chrome, Safari, FireFox and MSie8, of all things, and the following to get the Google Translate displayed on a page :

...

<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>

...

Just noticed that FireFox, on Windows, is not doing the drop-down list. But it has problem without the CSS trickery above (!!)

Play with the numbers, and your fav browsers to tweak to your needs.

I wanted to split the horizontal into two lines to make it more compact still. That might need some JavaScript or otherwise to parse and sneak in a
just at the right spot ?? Maybe use similar to above to modify one of the other layouts supplied by Google. As long as the logo is there, we should be ok ... right ?

Have fun !

回复收藏 0 原文

~没有更多了~