Funzioni windows.onload in conflitto o prevaricanti (credo)

N

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:
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
 
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");
});
 
borgo italia ha scritto:
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
Clicca per allargare...

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>
 
alessandro1997 ha scritto:
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");
});
Clicca per allargare...

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.
 
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:
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.
 
Vale2 ha scritto:
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.
Clicca per allargare...

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:
 
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.
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

K
Mettere insieme due funzioni
Risposte
2
Visite
2K
Javascript
kerkut
K
MarcoGrazia
Contenuto generato e richiamo funzioni
Risposte
5
Visite
2K
Ajax
MarcoGrazia
MarcoGrazia
D
  • Bloccata
aiuto funzioni javascript
Risposte
1
Visite
876
Javascript
Max 1
Max 1
M
Unire 2 funzioni per l'invio di un form e con l'apertura di un div
Risposte
0
Visite
1K
Javascript
maxnegri2036
M
S
Differenza tra le funzioni include () e require ()?
Risposte
1
Visite
747
PHP
socket32
socket32
S
Problemi delle funzioni eliminate con PHP e MySQL
Risposte
4
Visite
2K
PHP
Silvio0505
S
B
Funzioni matematiche php
Risposte
2
Visite
985
PHP
bogontom
B
G
funzioni php pericolose
Risposte
2
Visite
1K
Hosting
ginepraio
G
M
[PHP] utilizzo di una classe e delle sue funzioni
Risposte
2
Visite
1K
PHP
mau90
M
Arcadia
[MS Access] Implementazione progetto con nuove funzioni.
Risposte
0
Visite
1K
MS Access
Arcadia
Arcadia
N
[Java] jbutton con funzioni
Risposte
2
Visite
1K
Java
nunzio.rizzo74
N
A
Richiamare funzioni esterne JS da PHP
Risposte
9
Visite
10K
PHP
marino51
marino51
M
[Javascript] Spiegazioni di due funzioni
Risposte
10
Visite
2K
Javascript
MarDom96
M
Andy56
Parametri funzioni in Java
Risposte
0
Visite
3K
Java
Andy56
Andy56
A
[PHP] info funzioni
Risposte
11
Visite
2K
PHP
bubino8
bubino8
M
La bozza di un sito con alcune funzioni javascript non si apre correttamente su smartphone
Risposte
1
Visite
1K
Javascript
linoma
L
M
Riadattamento funzioni per far scomparire un menu.
Risposte
4
Visite
1K
jQuery
megafrench
M
V
Creare funzioni PHP per agevolare bootstrap
Risposte
1
Visite
1K
PHP
vincenzo46
V
B
funzioni per creare file e inserirli dentro una certa cartella in php?
Risposte
1
Visite
2K
PHP
cris8380
cris8380
epicbrozo
[Javascript] Mi potreste spiegare passo passo i passaggi di due funzioni?
Risposte
0
Visite
1K
Javascript
epicbrozo
epicbrozo
Alto Basso