web-development-kb-pt.site

Adicionando onload ao corpo

No momento, estou tentando desenvolver um plug-in que incorpore um tour do Google Earth em um post/página WP por meio de um shortcode.

O problema que estou enfrentando é que, para o passeio carregar, eu tenho que adicionar uma onload="init()" na tag <body>.

Eu posso modificar um arquivo de modelo específico, mas como isso é para o lançamento, eu preciso adicioná-lo dinamicamente através de um gancho. Alguma ideia?

hooksjavascriptplugins
5
Norcross

Fiz um pouco mais de escavação e encontrei uma maneira "melhor" de fazê-lo funcionar (o Google dificulta a inserção de seus Earth Tours, e seu gadget não funciona).

Acabei fazendo um plugin que usa uma combinação de um shortcode e um campo personalizado.

0
Norcross

E aqui está uma solução jQuery (como Mike sugeriu em seu primeiro comentário).

function add_my_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('my_init_script', SCRIPTSRC, 'jquery', '1.0');
}
add_action('init', 'add_my_scripts');

Em seguida, adicione um script ao seu plug-in que faça isso:

jQuery.noConflict();

jQuery(document).ready(function($) {
    init();
}

Isso iniciará o jQuery em nenhum modo de conflito (se já não estiver) e adicionará uma chamada ao método init() quando o documento estiver pronto. É um método mais seguro de usar que body onready() porque a função onready() só pode chamar uma coisa ... então ninguém mais pode ligar nada a isso ou adicionar um script personalizado. É melhor deixar seu plug-in o mais discreto possível, para que outros plug-ins não interfiram ou vice-versa.

9
EAMann

Aqui está uma abordagem. Você adicionaria a chamada add_action() dentro do seu gancho, eu acredito. O JavaScript I include presume que a função init já tenha sido definida. Se não, então isso irá falhar, mas incluir o script parece ser um problema que você já resolveu, se estou entendendo bem. Note que você não precisa necessariamente adicioná-lo a wp_foot, você pode facilmente adicioná-lo a wp_head:

<?php

function mypluginprefix_onload_init() { ?>
<script language="text/javascript">
// check for the standards-compliant way to add onload events
if ( typeof(window.addEventListener) !== 'undefined' )
    window.addEventListener( "load", init, false );
// or the older msie nonstandard way
else if ( typeof(window.attachEvent) !== 'undefined' ) {
    window.attachEvent( "onload", init );
}
</script>
<?php }

// this goes in your hook
add_action('wp_foot', 'mypluginprefix_onload_event');
?>
4
artlung

Ignorando o potencial para fazer isso com jQuery, uma coisa que você pode fazer é ligar o filtro template_include e usar ob_start()com um retorno de chamada. Seu callback pode então fazer uma pesquisa de string em '<body' e substituí-lo por '<body onload="init()"' como o código a seguir faz. Você deve ser capaz de soltá-lo diretamente no seu plugin, apenas certifique-se de alterar os nomes para seguir a convenção de nomenclatura do seu plugin:

<?php
add_filter('template_include','start_buffer_capture',1);
function start_buffer_capture($template) {
  ob_start('end_buffer_capture');  // Start Page Buffer
  return $template;
}
function end_buffer_capture($buffer) {
  return str_replace('<body','<body onload="init()"',$buffer);
}

Note que eu não presumo que o código acima seja totalmente robusto ainda se eu fosse você. Eu duvido que ele lidará com todos os casos do Edge desde que eu o juntei para responder sua pergunta, mas minimamente ele mostra como realizar o caso normal, e então com algum teste de caso de uso eu tenho certeza que você conseguirá lidar com tudo os casos importantes do Edge (como se o '<BODY' fosse maiúsculo, etc?)

2
MikeSchinkel

Aqui está um pouco de JavaScript para adicionar dinamicamente um retorno de chamada ao carregamento da página, com ou sem jQuery:

function add_onload() {
    ?>
    <script type="text/javascript">
    my_onload_callback = function() { alert('Hello!'); }; // test function

    if( typeof jQuery == "function" ) { 
        jQuery(my_onload_callback); // document.ready
    } else {
        document.getElementsByTagName('body')[0].onload = my_onload_callback; // body.onload
    }
    </script>
    <?php
}
add_action( 'wp_footer', 'add_onload' );

No seu caso, você apenas substituiria o my_onload_callbacks pelo seu método init.

1
Annika Backstrom