Имя элемента gcse:searchbox-only не может быть представлено как XML 1.0

Я получаю следующую ошибку в валидаторе w3,

 Line 62, Column 140: Element name gcse:searchbox-only cannot be represented as XML 1.0.

Я использую панель поиска Google внутри веб-сайта, который добавляется этим кодом,

<gcse:searchbox-only></gcse:searchbox-only>

пожалуйста, помогите избежать этой ошибки. Спасибо

7 ответов


Майкл [tm] Смит, парень, который следит за валидатором W3C HTML говорит здесь:

Это не ошибка, это предупреждение. И оно испущено потому что содержимое подается в виде HTML, а не с типом MIME XML, и Синтаксические анализаторы HTML ничего не знают о пространствах имен -- чтобы поместить его в XML термины, каждое имя элемента является локальным именем - и поэтому в HTML буквальное имя этого элемента- "g: plusone". И это имя не может быть представлен в формате XML потому что XML не позволяет двоеточиям в локальном имена. Таким образом, дух предупреждения должен сказать, если вы когда - нибудь захотите чтобы использовать это содержимое в качестве XML вместо HTML, у вас есть имя элемента в нем это запрещено в XML.

Он говорит об элементе g:plusone но это та же проблема.

но я немного не согласен. Двоеточия действительны в локальных именах элементов в XML 1.0. Они только запрещены в XML 1.0 + пространства имен Так предупреждение определенно может быть улучшена.

обновление: Ранее я предлагал обходной путь на основе документа.напишите, но, как указывает Ян М в комментариях, IE имеет свои собственные идеи о том, что делать с элементами с двоеточием в их именах тегов, поэтому он там не работал. Вместо этого я рекомендую следовать ответу Яна.


Я нашел этот ответ, скрытый в документах google:

https://developers.google.com/custom-search/docs/element#html5

HTML5-допустимые теги div

вы можете использовать HTML5-допустимые теги div, если соблюдаете следующие рекомендации:

  • атрибут class должен быть установлен в gcse-XXX
  • любые атрибуты должны иметь префикс data-.

например:

<div class="gcse-searchbox" data-resultsUrl="http://www.example.com" data-newWindow="true" data-queryParameterName="search" >

вы всегда можете использовать <div class="gcse-search"></div> вместо <gcse:search></gcse:search>, тогда ошибка уйдет от валидатора w3c.


решение очень простое, не использовать тег поиска google в html-странице. просто поместите простой код javascript, чтобы вставить тег поиска google в html по внутренний язык javascript опции.

вот пример:

<div id="gsearch"></div>

<script>
   var gcseDiv = document.getElementById('gsearch');
   gcseDiv.innerHTML = '<gcse:search></gcse:search>'
</script>

после этой строки вы можете написать или вставить код поиска Google, который будет таким же, как ниже

      <script>
      (function() {
                var cx = 'xxxxxxxxxxxxxxxxxxxxxxxxx:xxxxxxxxx';
                var gcse = document.createElement('script');
                gcse.type = 'text/javascript';
                gcse.async = true;
                gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                    '//www.google.com/cse/cse.js?cx=' + cx;
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(gcse, s);
              })();

      </script>

предложение: просто поставьте выше div и оба сценария в одном родительском div и управление css только для родительского div.


может быть, это слишком просто, но я работал над проблемой, просто поместив это внутрь и в конце javascript:

document.write('<gcse:search><\/gcse:search>');

и удалены

он работает в IE, Chrome, Firefox и Safari и проверяет.


используйте следующий код, если вы хотите отобразить только поле поиска (без resultsbox) с помощью DIV:

<div class="gcse-searchbox-only"></div>

Я следил за ответами здесь, он работает от ответа @animuson, но я нашел белый фон и границы в моем окне поиска Google из-за нового класса DIV, поэтому я отредактировал CSS, чтобы стать прозрачным и подходит для любого дизайна без добавления фона или границ.

вот решение:

.gsc-control-cse {
border-color: transparent!important;
background-color: transparent!important;
}