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.046
150
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
26
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
26
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
26
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
K Mettere insieme due funzioni Javascript 2
MarcoGrazia Contenuto generato e richiamo funzioni Ajax 5
D aiuto funzioni javascript Javascript 1
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
S Differenza tra le funzioni include () e require ()? PHP 1
S Problemi delle funzioni eliminate con PHP e MySQL PHP 4
B Funzioni matematiche php PHP 2
G funzioni php pericolose Hosting 2
M [PHP] utilizzo di una classe e delle sue funzioni PHP 2
Arcadia [MS Access] Implementazione progetto con nuove funzioni. MS Access 0
N [Java] jbutton con funzioni Java 2
A Richiamare funzioni esterne JS da PHP PHP 9
M [Javascript] Spiegazioni di due funzioni Javascript 10
Andy56 Parametri funzioni in Java Java 0
A [PHP] info funzioni PHP 11
M La bozza di un sito con alcune funzioni javascript non si apre correttamente su smartphone Javascript 1
M Riadattamento funzioni per far scomparire un menu. jQuery 4
V Creare funzioni PHP per agevolare bootstrap PHP 1
B funzioni per creare file e inserirli dentro una certa cartella in php? PHP 1
epicbrozo [Javascript] Mi potreste spiegare passo passo i passaggi di due funzioni? Javascript 0
A funzioni asincrone e callback...help! Ajax 10
B [Javascript] funzioni non funzionanti in un form Javascript 8
V [Javascript] Funzioni su input dinamici Javascript 24
T [Javascript] un form con select dinamica che funzioni da menù... Javascript 2
N [php]icone funzioni tabelle PHP 12
localhost.nicola [Javascript] JS non esegue funzioni su bottoni stampati da chiamata AJAX Javascript 1
Andrea Perrone [Javascript] QUESITO SU FUNZIONI Javascript 28
M Sostituire le funzioni mysql con mysqli, ma quali? PHP 4
V Funzioni per il filesystem ed il percorso da inserire PHP 0
S funzioni per calcoli sulle date PHP 4
V problema con funzioni annidate Javascript 2
L Visibilità connessione Db con MySQLi in funzioni definite dall'utente PHP 0
A Passaggio di variabile tra funzioni PHP 5
MarcoGrazia Funzioni generiche per ogni uso Snippet PHP 0
M funzioni e gestori di eventi Javascript 1
neo996sps [PHP e funzioni con PDO] Funzione per generare corpo tabella PHP 1
R php.ini disabilitare funzioni PHP 2
otto9due Problema if elseif o foreach.. o non capisco cosa non funzioni.. PHP 4
M funzioni google maps sovrapposizione markers Javascript 0
O Non capisco cosa non funzioni.. :( Ajax 0
G Funzioni Template Tags WordPress 1
G Richiamare funzioni esterne PHP 0
S funzioni per immagini Javascript 1
B funzioni Javascript 0
A Raggruppare piu' funzioni in una sola PHP 1
P Unire due funzioni... Javascript 1
A .each con due funzioni per paramentro jQuery 0
Violetta De Amicis Conflitto funzioni jQuery jQuery 1
R visualizzare risultati query utilizzando le funzioni PHP 0
M Unire piu funzioni di una classe PHP 12

Discussioni simili