Adăugarea onload în body

Question

Adăugarea onload în body

25 aug. 2010, 09:24:15

Vizualizări: 14.7K

Voturi: 5

În prezent încerc să dezvolt un plugin care va încorpora un tur Google Earth într-un articol/pagină WP prin intermediul unui shortcode.

Problema cu care mă confrunt este că pentru ca turul să se încarce, trebuie să adaug un onload="init()" în tag-ul <body>.

Pot modifica un anumit fișier de template, dar întrucât acesta este destinat lansării, trebuie să-l adaug dinamic prin intermediul unui hook. Aveți idei?

Norcross

3.08K

cârlige javascript pluginuri

Comentarii

Nu este posibil să folosești Javascript non-intruziv prin jQuery?

MikeSchinkel

25 aug. 2010 10:20:39

Toate răspunsurile la întrebare

Și iată o soluție jQuery (așa cum a sugerat Mike în primul său comentariu).

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

Apoi adaugă un script în plugin-ul tău care face următoarele:

jQuery.noConflict();

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

Aceasta va porni jQuery în modul no conflict (dacă nu este deja) și va adăuga un apel către metoda init() când documentul este gata. Este o metodă mai sigură de utilizat decât body onready() deoarece funcția onready() poate apela doar un singur lucru... astfel încât nimeni altcineva nu poate adăuga scripturi personalizate sau să se conecteze la aceasta. Este mai bine să faci plugin-ul cât mai neintruziv posibil, astfel încât alte plugin-uri să nu interfereze sau invers.

EAMann

32.2K

25 aug. 2010 17:18:20

Comentarii

Cred că metoda ta este una dintre cele preferate. Cred că codul jQuery poate fi chiar redus, deoarece jQuery oferă o comandă rapidă pentru funcția ready.

hakre

25 aug. 2010 19:02:52

@EAMann - Poți să explici mai bine jQuery.noConflict()? Nu l-am folosit niciodată și documentația nu mi-a fost clară.

MikeSchinkel

25 aug. 2010 21:17:40

În mod implicit, jQuery setează simbolul $ ca sinonim pentru jQuery... acest lucru poate interfera cu alte biblioteci (Prototype, Scriptaculous, etc.) și poate afecta și funcțiile definite de utilizator care folosesc $. Folosirea jQuery.noConflict() dezactivează această setare implicită, dar poți continua să folosești funcția $ în codul tău dacă o transmiți ca parametru... deci funcția pe care am definit-o mai sus ar putea folosi $.ajax și alte apeluri native în interiorul funcției definite.

EAMann

25 aug. 2010 21:35:42

@MikeSchinkel: http://hakre.wordpress.com/2010/08/11/selekturz-they-iz-serius-bizniss/

hakre

28 aug. 2010 01:43:19

@EAMann - Mulțumesc. Știam despre folosirea în interiorul funcției ready(), dar nu mi-am dat seama că ar putea exista un conflict dacă pur și simplu nu folosești $ în afara unei închideri. Încă nu înțeleg exact ce face. Poate ar trebui să cercetez puțin mai mult...

MikeSchinkel

28 aug. 2010 02:49:58

Arată celelalte 1 comentarii

Iată o abordare. Ai adăuga apelul add_action() în interiorul hook-ului tău, cred. JavaScript-ul pe care îl includ presupune că funcția init a fost deja definită. Dacă nu a fost, atunci acest lucru va eșua, dar includerea scriptului pare a fi o problemă pe care ai rezolvat-o deja, dacă te înțeleg corect. Reține că nu este neapărat necesar să o adaugi la wp_foot, ai putea la fel de ușor să o adaugi la wp_head:

<?php

function mypluginprefix_onload_init() { ?>
<script language="text/javascript">
// verifică metoda standard de a adăuga evenimente onload
if ( typeof(window.addEventListener) !== 'undefined' )
    window.addEventListener( "load", init, false );
// sau vechea metodă non-standard pentru msie
else if ( typeof(window.attachEvent) !== 'undefined' ) {
    window.attachEvent( "onload", init );
}
</script>
<?php }

// acesta merge în hook-ul tău
add_action('wp_foot', 'mypluginprefix_onload_event');
?>

artlung

3.1K

25 aug. 2010 17:09:08

Comentarii

De ce Javascript direct și nu jQuery? jQuery gestionează toate cazurile limită în care codul poate rula înainte ca pagina să fie încărcată complet.

MikeSchinkel

25 aug. 2010 21:16:10

Pentru un simplu onload, cred că jQuery este exagerat. Doar atașează handler-ul și gata. jQuery vine cu un cost suplimentar în ceea ce privește descărcarea. Îmi place jQuery, dar nu este răspunsul la orice. Acum, dacă jQuery ar fi deja în coadă, atunci aș spune să-l folosești, dar răspunsul meu se descurcă fără el.

artlung

25 aug. 2010 22:00:24

Ignorând potențialul de a face acest lucru cu jQuery, un lucru pe care îl puteți face este să utilizați filtrul template_include și ob_start() cu un callback. Callback-ul dumneavoastră poate apoi să efectueze o căutare în șirul de caractere pentru '<body' și să-l înlocuiască cu '<body onload="init()"', așa cum face următorul cod. Ar trebui să puteți să-l introduceți direct în plugin-ul dumneavoastră, doar asigurați-vă că schimbați numele pentru a urma convenția de denumire a plugin-ului dumneavoastră:

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

Rețineți că, dacă aș fi în locul dumneavoastră, nu aș presupune că codul de mai sus este complet robust încă. Mă îndoiesc că va gestiona toate cazurile limită, deoarece l-am creat rapid pentru a răspunde la întrebarea dumneavoastră, dar cel puțin vă arată cum să realizați cazul normal, iar cu unele teste de utilizare, sunt sigur că îl veți face să gestioneze toate cazurile limită importante (cum ar fi ce se întâmplă dacă '<BODY' este scris cu majuscule, etc.)

MikeSchinkel

37.5K

25 aug. 2010 10:50:12

Iată un cod JavaScript pentru a adăuga dinamic un callback la încărcarea paginii, cu sau fără jQuery:

function add_onload() {
    ?>
    <script type="text/javascript">
    my_onload_callback = function() { alert('Salut!'); }; // funcție de test

    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' );

În cazul tău, ai putea înlocui pur și simplu my_onload_callback cu metoda ta de inițializare.

User

100

25 aug. 2010 13:49:35

Comentarii

Dacă poți, aș recomanda să postezi codul pentru beneficiul celor care vor găsi acest post.

User

26 aug. 2010 18:45:27

Da, ar fi chiar util pentru a înțelege mai bine la ce te-ai referit inițial. Întrebarea și răspunsul ar trebui să meargă împreună.

hakre

28 aug. 2010 01:46:36

Pentru cei care ar putea dori, iată plugin-ul. Este găzduit în depozitul WP http://wordpress.org/extend/plugins/google-earth-tours/

Norcross

14 sept. 2010 23:54:25

Puteți accepta propriul răspuns, pentru a indica că problema este rezolvată pentru dumneavoastră.

Jan Fabry

4 nov. 2010 20:02:38

Norcross 3.08K · Accepted Answer · 2010-08-26T17:58:06Z

Am făcut niște cercetări suplimentare și am găsit o metodă 'mai bună' de a face lucrurile să funcționeze (Google face dificilă încorporarea tururilor lor Earth, iar gadget-ul lor nu funcționează).

Am ajuns să creez un plugin care utilizează o combinație între un shortcode și un câmp personalizat.

Norcross

3.08K

26 aug. 2010 17:58:06