Изящно удалить 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. Пока логотип есть, мы должны быть в порядке... верно?
Повеселись!