Funzioni windows.onload in conflitto o prevaricanti (credo)

nikolacola

Nuovo Utente
22 Ago 2012
7
0
0
Buon pomeriggio a tutti;

Ho due script identici opportunamente modificati nei nomi di funzioni, var ed incognite, i quali prevedono una sezione di visualizzazione temporale di banner a rotazione 200x600, una sezione di visualizzazione temporale di teso in link, una visualizzazione temporale di 5 banner in 5 div univoci a loro volta contenuti in un unico div che non è dichiarato nello script ma formattato con css esterno alla pagina ed allo script. (anche il div banner 200x600 e contenuto in un'altro con le identiche caratteristice del contenitore dei div dei 5 banner di dimensioni più piccole.

Per non appesantire il codice html e quindi il download della pagina ho creato dei file Js esterni che vengono richiamati dal -script language="javascript" scr="none.js" tipe=ecc,ecc,- .

Se si applica un solo .js e il relativo .js che richiama la iquery tutto funziona perfettamente.

Il problema nasce nel momento in cui si richiama un secondo .js che dovrebbe far girare altri banner nella stessa pagina o richiamando un secondo .js che dovrebbe far visualizzare dei link a rotazione temporale.

Cosa succede?
Se richiamo 2 .js che dovrebbero svolgere ognuno una propria funzione di visualizzazione completamente differente sia nei tempi che nei contenuti, succede che se visualizzi uno l'altro scompare, se visualizzi l'altro l'uno scompare, pur riconoscendo che gli script sono contemporaneamente in esecuzione.

In sintesi se ne visualizza uno è gli altri non si vedono e non danno nemmeno errore per il debug.

Nei 2 .js vi è lo stesso codice ovviamente con le opportune e piccolissime modifiche apportate perchè si differenzino tra loro e spero non creino conlitti.

Ma insieme proprio non vanno. (sono 5 notti che tento e ritento ma niente)

Domanda:
Oltre a quello che ho gia fatto; cosa devo fare per far si che ogni .js faccia la sua fuzione senza che influenzi l'atro che usa la stessa IQuery?

Tra un Js e l'altro ho reso differenti le var aggiungendo un numero alla nome dichiarato.
2 js gestiscono contenuti per un solo div a testa con id differente
1 js gestisce contenuti per 5 div univoci

Ho anche provato a modificare la IQuery ($) assegnandogli il nome dei div e la var (i) dichiarando il nome univoco del div, ho anche assegnato un'incognita (x) differente in ogni .js ed altre prove ancora ed ancora... ma niente, il risultato non cambia.

Qual'è la soluzione? Se ne esiste una!!

Posto a il codice html con 2 .js nei tag head al fine di consentire eventuali test.



****************
CODICE HTML + JS
****************

HTML:
<html>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>test 1</title>

<!-- IQuery -->
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


<!-- QUESTO SCRIPT ATTIVA I LINKS -->
<!-- Rendi commento lo script dei links per disattivarlo e testare l'altro dei banner -->
<script language="javascript" type="text/javascript">
var imm = new Array();
 imm[0] = "La gallina";
 imm[1] = "Il pollo";
 imm[2] = "Il gallo";

var lnk = new Array();
 lnk[0] = "http://www.google.it/";
 lnk[1] = "http://www.google.it/";
 lnk[2] = "http://www.google.it/";

var div = new Array();
 div[0] = "mostra";
 
var x=0;

window.onload=function(){
	preloadlinks();
	mostra_links();
	
}

function mostra_links(){
	for (var mostra=0; mostra<div.length; mostra++){
		$('#'+div[mostra]).fadeOut(250, function(){
			$(this).html("<a href='" + lnk[x] + "' target='_blank'>" + imm[x] + "</a>");
			$(this).fadeIn(500);
			if(imm.length - 1 == x ){
				 x = 0;
			}else{
				x++;
			}
		});
	}
	setTimeout('mostra_links()',1000);
}

function preloadlinks() {
	var imageObj = new Image();
	for(var x=0; x<imm.length; x++) {
		imageObj.src=imm[x];
	}
}
</script>


<!-- QUESTO SCRIPT ATTIVA IL BANNER -->
<!-- Rendi commento lo script banner per disattivarlo e testare l'altro dei links -->
<!-- script reso commento
<script language="javascript" type="text/javascript">
var imm2 = new Array();
 imm2[0] = "immagine1.gif";
 imm2[1] = "immagine2.jpg";

var lnk2 = new Array();
 lnk2[0] = "http://www.google.it/";
 lnk2[1] = "http://www.google.it/";

var div = new Array();
 div[0] = "mostra2";
 
var s=0;

window.onload2=function(){
	preloadbanner();
	mostra_banner();
	
}
function mostra_banner(){
	for (var mostra2=0; mostra2<div.length; mostra2++){
		$('#'+div[mostra2]).fadeOut(250, function(){
			$(this).html("<a href='" + lnk2[s] + "' target='_blank'><img border='0' src='" + imm2[s] + "'></a>");
			$(this).fadeIn(500);
			if(imm2.length - 1 == s ){
				 s = 0;
			}else{
				s++;
			}
		});
	}
	setTimeout('mostra_banner()',5000);
}
function preload() {
	var imageObj = new Image();
	for(var s=0; s<imm2.length; s++) {
		imageObj.src=imm2[s];
	}
}
</script>
-->

<!--
window.onload=function(){
preloadlinks();
mostra_links();
preload();
mostra_banner();
}
-->
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="25" valign="middle" bgcolor="#FFCCFF">
<tr>
<td width="100%">
<!-- Contenitore dei links (id="mostra") a sua volta contenuto in una tabella-->
<div id="mostra" style="margin-left: 10; margin-right: 10"></div>
</td>
</tr>
</table>
<BR/>

<!-- Contenitore dei banner (id="mostra2") libero nel corpo-->
<div id="mostra2" style="margin-left: 10; margin-right: 10"></div>

</body>
</html>
************************

Grazie a chiunque mi risponda ma sopratutto un gigantesco grazie a chi mi rifila la dritta giusta.
 
Ultima modifica di un moderatore:

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
ciao
non sono un esperto di js, però una cosa devi fare: racchiudi sempre il codice tra gli appositi tag (è più leggibile).
barra di formattazione del post seconda riga ultime tr iconcine, nell'ordine CODE,HTML,PHP
 

alessandro1997

Utente Attivo
6 Ott 2009
5.302
1
0
23
Roma
alessandro1997.netsons.org
Questo succede perché onload non è altro che una proprietà dell'oggetto window, e dunque viene sovrascritta dagli script che carichi. Per risolvere il problema puoi usare questa sintassi invece dell'assegnazione:
Codice:
window.addEventListener("load", function() {
    alert("Script 1");
});
 

nikolacola

Nuovo Utente
22 Ago 2012
7
0
0
ciao
non sono un esperto di js, però una cosa devi fare: racchiudi sempre il codice tra gli appositi tag (è più leggibile).
barra di formattazione del post seconda riga ultime tr iconcine, nell'ordine CODE,HTML,PHP
Ok; grazie per l'informazione.
Nemmeno io sono un'esperto di .js.
Adesso faccio una prova cosi per le prossime non sbaglio.

Nuovamente grazie

HTML:
<html>
<head>
<title></title>
</head>

<body>
Test1 chiusuta tra tag di formattazione del forum per codice html
</bodi>
</html>
 

nikolacola

Nuovo Utente
22 Ago 2012
7
0
0
Questo succede perché onload non è altro che una proprietà dell'oggetto window, e dunque viene sovrascritta dagli script che carichi. Per risolvere il problema puoi usare questa sintassi invece dell'assegnazione:
Codice:
window.addEventListener("load", function() {
    alert("Script 1");
});
Grazie alessandro;

Ho provato la sostituzione della proprietà onload dell'oggetto windows, come mi hai suggerito.

Non ho però capito in che maniera dovrei sostituire l'oggetto o se devo aggiungere la proprietà addEventListener togliendo la proprietà pre esistente onload o se devo lasciare l'oggetto pre esestente con le relative proprietà ed aggiungere solo le proprietà e la definizione da te fornita nel codice senza rimuovere il precedente.

Non ho nemmeno capito se tale pezzo di codice fornito devo applicarlo ad ogni singolo script .js o se devo unificare i 2 .js per renderlo singolo.

Comunque io ho fatto queste determinate prove in ogni singolo .js ed anche unificandoli ma il risultato è invariato.

Singolarmente funzionano insieme o unificati, uno prevarica l'altro.

Modifiche testate singolarmente

script 1: (non visualizza niente anche da solo - Non mi da nemmelo l'alert)
Codice:
 window.addEventListener("load", function() {
    alert("Script 1");
    preloadlinks();
    mostra_links();
});
script 2: (non visualizza niente anche da solo - Non mi da l'alert)
Codice:
 window.addEventListener("load", function() {
    alert("Script 2");
    preloadbanner();
    mostra_banner();
});
Secondo test rendedo il .js unico (non visualizza niente - Non mi da l'alert)
Codice:
 window.addEventListener("load", function() {
    alert("Script 2");
    preloadlinks();
    mostra_links();
    preloadbanner();
    mostra_banner();
});
In sintesi non ho capito in che modo impostarlo.

Non potresti cortesemente postarmi il pezzo di codice direttamente modificato secondo tue direttive?

Dovresti avere un po di pazienza e considerarmi come individuo in evoluzione in js e non come persona esperta.

Comunque ti ringrazio già tantissimo per la risposta precedente.
 

alessandro1997

Utente Attivo
6 Ott 2009
5.302
1
0
23
Roma
alessandro1997.netsons.org
Ora che ci penso, dato che hai jQuery puoi sfruttare il sistema di gestione degli eventi messo a disposizione dal framework:
Codice:
// presa da http://snipplr.com/view/3116/
function listen(evnt, elem, func)
{
    if (elem.addEventListener) { // W3C DOM
        elem.addEventListener(evnt, func, false);
    } else if (elem.attachEvent) { // IE DOM
        var r = elem.attachEvent("on" + evnt, func);
        return r;
    } else {
        window.alert('I\'m sorry Dave, I\'m afraid I can\'t do that.');
    }
}

var imm = new Array();
imm[0] = "La gallina";
imm[1] = "Il pollo";
imm[2] = "Il gallo";

var lnk = new Array();
lnk[0] = "http://www.google.it/";
lnk[1] = "http://www.google.it/";
lnk[2] = "http://www.google.it/";

var div = new Array();
div[0] = "mostra";
 
var x = 0;

function mostra_links(){
	for (var mostra = 0; mostra < div.length; mostra++) {
		$('#' + div[mostra]).fadeOut(250, function() {
			$(this).html("<a href='" + lnk[x] + "' target='_blank'>" + imm[x] + "</a>");
			$(this).fadeIn(500);
			if (imm.length - 1 == x ) {
				 x = 0;
			} else {
				x++;
			}
		});
	}
    
	setTimeout('mostra_links()', 1000);
}

function preloadlinks()
{
	var imageObj = new Image();
    
	for (var x = 0; x < imm.length; x++) {
		imageObj.src = imm[x];
	}
}

$(function() {
    preloadlinks();
    mostra_links();
});

var imm2 = new Array();
imm2[0] = "immagine1.gif";
imm2[1] = "immagine2.jpg";

var lnk2 = new Array();
lnk2[0] = "http://www.google.it/";
lnk2[1] = "http://www.google.it/";

var div = new Array();
div[0] = "mostra2";
 
var s = 0;

function mostra_banner()
{
	for (var mostra2=0; mostra2 < div.length; mostra2++) {
		$('#' + div[mostra2]).fadeOut(250, function() {
			$(this).html("<a href='" + lnk2[s] + "' target='_blank'><img border='0' src='" + imm2[s] + "'></a>");
			$(this).fadeIn(500);
            
			if (imm2.length - 1 == s ) {
				 s = 0;
			} else {
				s++;
			}
		});
	}
    
	setTimeout('mostra_banner()', 5000);
}
function preload()
{
	var imageObj = new Image();
    
	for(var s = 0; s < imm2.length; s++) {
		imageObj.src=imm2[s];
	}
}

$(function() {
    preload();
    mostra_banner();
});
Inoltre, aggiorna la versione di jQuery:
HTML:
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
Ultima modifica:

nikolacola

Nuovo Utente
22 Ago 2012
7
0
0
Grazie Alessandro; ma non funziona.

La visualizzazione presenta lo stesso problema di prima
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Ciao,

devi usare un solo gestore di eventi onload per inserire il richiamo delle funzioni.

In un'altro script dopo il tag body, non usare lo stesso nome variabile per i div


Codice:
var div = new Array();
div[0] = "mostra";

var div1 = new Array();
div1[0] = "mostra2";
$('#'+[B]div1[/B][mostra2]).fadeOut(250, function(){

Per il primo:

Codice:
<body>
<script type="text/javascript">
window.onload=function(){
	preloadlinks();
	mostra_links();
	preload();
	mostra_banner();
}
</script>
Per il secondo:

Codice:
<body>
<script type="text/javascript">
$(function() {
    preloadlinks();
    mostra_links();
	preload();
    mostra_banner();
});
</script>
Valeria.
 

nikolacola

Nuovo Utente
22 Ago 2012
7
0
0
Ciao,

devi usare un solo gestore di eventi onload per inserire il richiamo delle funzioni.

In un'altro script dopo il tag body, non usare lo stesso nome variabile per i div.... Valeria.
Un milione di grazie Valeria;
Tutto funziona a meraviglia (almeno sulla mia macchina).
Le tue informazioni mi hanno consentito di risolvere un annoso problema.
Il codice da te postato ed utilizzato nel modo come hai decritto non fa pieghe.

Per me sei stata BRAVISSIMA!

Per rendere un po più pulito il codice html ho usato i tuoi consigli elminando del tutto l'oggetto windows ed inserito le funzioni che richiamano le proprieta della ($) di IQuery che dovevano essere inserite nei tag body direttamente nei .js.

Il risultato non cambia funziona benissimo.

A questo punto posto il codice da me ripulito affinchè resti a memoria futura e per consentire ad altri che potrebbero ritenerlo utile di risparmiare un sacco di tempo e grattacapi con quest ($) delle IQuery.

CODICE HTML CON SCRIP INCLUSI TRA I TAG <HEAD>
HTML:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>test 1</title>

<!-- IQuery 1.3.2 -->
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<!-- QUESTO SCRIPT ATTIVA I  LINKS -->
<script language="javascript" type="text/javascript">
var imm = new Array();
 imm[0] = "La gallina";
 imm[1] = "Il pollo";
 imm[2] = "Il gallo";

var lnk = new Array();
 lnk[0] = "http://www.google.it/";
 lnk[1] = "http://www.google.it/";
 lnk[2] = "http://www.google.it/";

var div = new Array();
 div[0] = "mostra";
 
var x=0;

//VARIAZIONE: Rimosso da questo punto il primo oggetto (windows=onload) per evitare qualsiasi problema di sovrascrittura

function mostra_links(){
	for (var mostra=0; mostra<div.length; mostra++){
		$('#'+div[mostra]).fadeOut(250, function(){
			$(this).html("<a href='" + lnk[x] + "' target='_blank'>" + imm[x] + "</a>");
			$(this).fadeIn(500);
			if(imm.length - 1 == x ){
				 x = 0;
			}else{
				x++;
			}
		});
	}
	setTimeout('mostra_links()',1000); //tempo di visualizzazzione accorciato per test
}

$(function() { // VARIAZIONE: Prima funzione aggiunta che richiama ($) ed identifica la variabile (div=mostra)
	preloadlinks();
    mostra_links();
})

function preloadlinks() {
	var imageObj = new Image();
	for(var x=0; x<imm.length; x++) {
		imageObj.src=imm[x];
	}
}
</script>


<!-- QUESTO SCRIPT ATTIVA IL BANNER -->
<script language="javascript" type="text/javascript">
var imm2 = new Array();
 imm2[0] = "immagine1.gif";
 imm2[1] = "immagine2.jpg";

var lnk2 = new Array();
 lnk2[0] = "http://www.google.it/";
 lnk2[1] = "http://www.google.it/";

var div1 = new Array();
div1[0] = "mostra2";  //VARIAZIONE: ridefinita la variabile rendendola univoca e differante dal (div) del .js dei links sopra
 
var s=0;

//VARIAZIONE: Rimosso da questo punto il secondo oggetto (windows=onload) per evitare qualsiasi problema di sovrascrittura

function mostra_banner(){
	for (var mostra2=0; mostra2<div1.length; mostra2++){
		$('#'+div1[mostra2]).fadeOut(250, function(){
			$(this).html("<a href='" + lnk2[s] + "' target='_blank'><img border='0' src='" + imm2[s] + "'></a>");
			$(this).fadeIn(500);
			if(imm2.length - 1 == s ){
				 s = 0;
			}else{
				s++;
			}
		});
	}
	setTimeout('mostra_banner()',2000); //tempo di visualizzazzione accorciato per test
}

$(function() { //VARIAZIONE: Seconda funzione aggiunta che richiama ($) ed identifica la variabile (div1=mostra2)
	preload();
    mostra_banner();
})

function preload() {
	var imageObj = new Image();
	for(var s=0; s<imm2.length; s++) {
		imageObj.src=imm2[s];
	}
}
</script>
<!-- End script -->
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="25" valign="middle" bgcolor="#FFCCFF">
<tr>
<td width="100%">
<!-- Contenitore dei links (id="mostra") a sua volta contenuto in una tabella-->
<div id="mostra" style="margin-left: 10; margin-right: 10"></div>
</td>
</tr>
</table>
<BR/>

<!-- Contenitore dei banner (id="mostra2") libero nel corpo-->
<div id="mostra2" style="margin-left: 10; margin-right: 10"></div>

</body>
</html>
VALERIA.... Io i AMO! :love:
 

alessandro1997

Utente Attivo
6 Ott 2009
5.302
1
0
23
Roma
alessandro1997.netsons.org
Piuttosto strano. Per quanto ne so diverse chiamate alla funzione ready dovrebbero essere concatenate:
HTML:
<!doctype html>
<html>
	<head>
		<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
		<script>
		$(function() {
			alert("Ciao");
		});
		$(function() {
			alert("Ciao 2");
		});
		</script>
	</head>
	<body>
	</body>
</html>
I due alert vengono visualizzati correttamente.

EDIT: Ops. Mi ero perso l'altra pagina della discussione.