Изящно удалить HTML-контент, который находится за пределами div

Я использую API перевода Google, который вставляет некоторый контент на мою страницу (раскрывающийся список), а часть контента находится вне какого-либо элемента 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 

Я попытался сделать это путем переназначения innerHTML содержащего div,

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

Но это, кажется, сбрасывает / ломает некоторые другие функции API, которые мне необходимо сохранить.

Есть ли более изящный способ сделать это?

РЕДАКТИРОВАТЬ - Что касается условий обслуживания, если это не разрешено, кто-нибудь знает об API с открытым исходным кодом, который я могу альтернативно использовать?

3 ответа

Решение

Из документации Google Translate API v1:

Предупреждение! Этот API требует отображения атрибуции рядом с любыми полями ввода API и отображения результатов, указывающих, что он "Powered by Google". Если вы решите не использовать.getBranding(), вы обязаны предоставить этот бренд самостоятельно.

Если вы удалите такую ​​вещь, я уверен, что вы нарушите условия лицензионного соглашения, и их за мошенничество.

Помните, что Google Translate API устарел в пользу платных услуг.

Лучший способ - забыть о Google Translator Service, если вы хотите получить бесплатную версию, поскольку они заявляют, что закроют ее в этом году и будут использовать другую бесплатную службу, например Bing.

Осматривая некоторую информацию по этому вопросу, я пришел к следующему:

Почему бы вам просто не урезать "лишние" материалы, чтобы сделать их менее навязчивыми на вашем сайте, но при этом более четкими, чем мелкий шрифт в нижней части большинства контрактов. Таким образом, вы должны соблюдать условия обслуживания и не отказываться от слишком большого количества недвижимости на своей странице.

Вот немного магии 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>

...

Просто заметил, что FireFox в Windows не делает выпадающий список. Но у него есть проблема без хитрости CSS выше (!!)

Играйте с числами, и ваши любимые браузеры подстраиваются под ваши нужды.

Я хотел разбить горизонталь на две линии, чтобы сделать ее еще более компактной. Это может потребовать некоторого JavaScript или иным образом, чтобы разобрать и пробраться в
просто в нужном месте?? Возможно, используйте аналогичные выше, чтобы изменить один из других макетов, предоставленных Google. Пока логотип есть, мы должны быть в порядке... верно?

Повеселись!

Другие вопросы по тегам