Подтвердить что ты не робот

PrettyPrint() не вызывается при загрузке страницы

Я пытаюсь очистить свой код в Blogger. Я связал файлы Google JS и CSS с моим шаблоном. Проблема в том, что я хочу, чтобы код был приглушен при загрузке страницы, поэтому я добавляю событие prettyPrint(); к загрузке страницы в шаблон.

<body onload="prettyPrint();">

Этот код не выполняется. Однако, если я наберу prettyPrint() вручную в консоли, мои коды будут исправлены правильно. Блокирует ли шаблон блога Blogger функции JS вручную?

РЕДАКТИРОВАТЬ. Я заставляю его работать с помощью ручного вызова функции в каждом сообщении, которое мне нужно для дедуксирования кода (см. ниже). Тем не менее, я хочу знать, почему я не могу сделать это на шаблоне.

<pre class="prettyprint linenums lang-js">
function testCode(){

}
</pre>
// I have to do this in every post :-s
<script type="text/javascript">
prettyPrint();
</script>

РЕДАКТИРОВАТЬ 2 README сказал, что я не должен использовать prettyPrint() непосредственно в качестве обработчика, но обернуть его в закрытие вместо. Поэтому я добавил этот код, похожий на пример в README, в мой <head>, но безрезультатно.

<script type='text/javascript'>
window.addEventListener('load', function (event) { prettyPrint() }, false); 
</script>

ИЛИ 

<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function() {
    prettyPrint();
});
</script>

РЕДАКТИРОВАТЬ 3 Мой шаблон HTML - это только шаблон шаблона Dynamics View (Classic) по умолчанию с добавленной библиотекой prettify, как описано выше.

EDIT 4 Вот ссылка, чтобы продемонстрировать проблему: http://testprettyprint.blogspot.com/2013/02/blog-post.html - блок кода не будет автоматически отключен, но если вы откройте консоль Chrome и введите prettyPrint(), коды будут правильно выделены.

РЕДАКТИРОВАТЬ 5 Причина, по которой я думаю, что это моя проблема, а не блоггер, потому что этот парень по-прежнему имеет свой код, приглушенный с использованием той же техники: http://errorbuster.blogspot.com/2012/07/prettify-syntax-highlighter-for-blogger.html

РЕДАКТИРОВАТЬ 6 Как указал Джеффри Кью в своем ответе, Dynamics View загружает содержимое блога с помощью AJAX, поэтому любой вызов JS с загрузкой документа будет выполнен до того, как будет загружен фактический контент. Поэтому любой JavaScript, выполняемый на самом блоге, а не на документе, является недопустимым. Поэтому я думаю, теперь вопрос заключается в том, как подключиться к событию Dynamics View ajax:complete, если есть такая вещь, но я сомневаюсь, что есть. Спасибо всем, кто ответил. Я не уверен, что это можно считать ошибкой, но я напишу о проблеме с блоггером.

ЗАКЛЮЧЕНИЕ Пожалуйста, прочитайте Джеффри, чтобы ответить. Он обнаружил, что событие вызывает функцию.

4b9b3361

ОТВЕТЫ

Ответ 1

Я считаю, что ваша тестовая страница использует Blogger "Шаблоны Ajax" (не уверен, что такое официальное название), тогда как другая ссылка, которую вы опубликовали, использует классические шаблоны.

Если вы перезагрузите тестовую страницу, вы сначала увидите логотип Blogger в середине страницы, затем появится ваш контент. Если вы просмотрите источник тестовой страницы, вы увидите много кода, но не ваш контент. Я считаю, что с шаблонами макета, сначала запускается код Blogger, затем он извлекает ваш контент с помощью Ajax. Любой JavaScript-код, который выполняется на готовом документе (DOMContentLoaded) или загрузка окна, будет запущен до того, как ваш контент будет загружен на страницу.

Я полагаю, если вы добавьте виджет HTML/Javascript на страницу (после вашего блока содержимого), затем включите вызов prettyPrint() внутри этого виджета он должен вызываться каждый раз, когда отображается сообщение.

Обновление: Официальное название этого шаблона - "Динамические представления", и похоже, что виджет HTML/JavaScript не поддерживается для динамических представлений. Я не могу найти упоминания об API, который позволяет вам подключиться к JavaScript Blogger, поэтому я считаю, что ответ (по крайней мере на данный момент) заключается в том, что невозможно добавить код уровня шаблона, чтобы делать то, что вы хотите. Наиболее практичным способом было бы включить тег script с prettyPrint() в каждом сообщении: - (

Обновление 2: Я прослеживал код Blogger, и я думаю, что нашел подходящее (и связанное) событие. Попробуйте включить это после кода Dynamic Views (в элементе head после тегов <script src='//www.blogblog.com/dynamicviews/...'></script>):

<script>
$(window.blogger.ui()).on('viewitem', function (event, post, element) {
    prettyPrint();
});
</script>

Событие viewitem запускается каждый раз, когда пользователь просматривает элемент (который может произойти несколько раз в жизни страницы). Аргумент element является объектом jQuery элемента контейнера элемента, поэтому, если вы хотите сохранить prettyPrint() немного времени, вы можете сделать это:

<script>
$(window.blogger.ui()).on('viewitem', function (event, post, element) {
    element.each(function () {
        // first argument is a callback function
        // second argument is a root element or document to check
        prettyPrint(null, this);
    });
});
</script>

Ответ 2

С приведенными выше фрагментами может быть несколько проблем. Если вы связали событие с <body onload="...">, другие коды javascript могли бы перезаписать его. Dom.addEventListener не будет работать с Internet Explorer, вам нужно использовать Dom.attachEvent. В основном, когда я не могу или не могу использовать фреймворк javascript, например jquery для обработки событий, тогда я использую свой старый код для обработки событий onload:

// window.ready
function register_onload(func){
    var oldOnload = window.onload;
    if(typeof(oldOnload) == 'function'){
        window.onload = function(){
            oldOnload();
            func();
        }
    }else{
        window.onload = function(){
            func();
        }
    }
}

// document.ready
function register_onload(func){
    var old_onload = document.onreadystatechange;
    if(typeof old_onload == 'function'){
        document.onreadystatechange = function(){
            old_onload();
            if(document.readyState == 'complete'){
                func();
            }
        }
    }else{
        document.onreadystatechange = function(){
            if(document.readyState == 'complete'){
                func();
            }
        }
    }
}

Я прикладываю два кода, которые работают несколько иначе. В основном, если вы используете document.ready(2-й сниппп), тогда код подзарядки будет запускаться при загрузке страницы и создании всех элементов HTML. Но на document.ready нет гарантии, что загружаются все коды javasript и css, поэтому, если вы хотите, чтобы все коды и скрипты загружались, вам понадобится window.ready(1st snippet).

В вашей ситуации, я полагаю, вам нужен второй, document.ready фрагмент, и вы можете использовать его следующим образом:

// copy 2nd snippet here...
register_onload(function(){
    prettyPrint();
});

Также я рекомендую вам поставить код javacript между символами /*<![CDATA[*/ ... /*]]>*/, поэтому ваш окончательный код будет выглядеть следующим образом:

<script type="text/javascript">/*<![CDATA[*/
// shorter version of the 2nd snippet
function register_onload(f){
    var d=document,o=d.onreadystatechange;
    if(typeof(o)=='function'){
        d.onreadystatechange=function(){o();if(d.readyState=='complete')f();}
    }else{
        d.onreadystatechange=function(){if(d.readyState=='complete')f();}
    }
}
register_onload(function(){
    prettyPrint();
});
/*]]>*/</script>

Надеюсь, это поможет вам решить вашу проблему.