Foglio di stile ignorato quando si utilizza body onload e document.write

Mi sto cimentando con JavaScript che sperimenta per avere un'idea e ha già riscontrato un problema. Qui è il mio codice html:Foglio di stile ignorato quando si utilizza body onload e document.write

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
<link rel="stylesheet" type="text/css" href="styles.css"> 
<script type="text/javascript" src="testing.js"></script> 
</head> 
<body onload="writeLine()"> 
</body> 
</html>

Ecco l'testing.js JavaScript:

function writeLine() 
{ 
    document.write("Hello World!") 
}

Ecco la styles.css foglio di stile:

html, body { 
    background-color: red; 
}

Quindi un esempio molto semplice, ma potrei aver scelto un esempio scomodo, usando on-load in un body tag. Quindi il codice sopra carica ed esegue la funzione, ma il foglio di stile non fa nulla, a meno che non rimuovo i tag dello script in testa. Ho provato a mettere i tag script ovunque, ma niente funziona. Ho cercato online come collegare correttamente i file JavaScript e non ho trovato alcuna soluzione chiara, qualcuno può segnalare il mio errore?

Ho usato JavaScript prima, ma voglio una chiara comprensione fin dall'inizio, prima che lo uso più

fonte

2012-05-28 deucalion0

[questo post] (http://stackoverflow.com/q/10661964/575527) potrebbe spiegare di più – Joseph

Demo: http://jsfiddle.net/C6jKG/ –

In realtà dovresti evitare di usare 'document.write() ' – lanzz

Il tuo problema è con il document.write() chiamato in un momento sbagliato ^*. Questo metodo stampa il testo dato nella posizione corrente nella pagina come previsto per funzionare mentre la pagina viene caricata. Perché si sta chiamando quando l'intera pagina è stata caricata, i risultati sono inaspettati

Invece si dovrebbe manipolare direttamente l'albero dom (undefined?):

function writeLine() { 
    var text = document.createTextNode("Hello World!"); 
    document.body.appendChild(text); 
}

In realtà nel browser Opera vedo sfondo rosso per pochi millisecondi e poi torna al bianco. Prova a commentare document.write() - lo sfondo è come previsto. Inoltre dovresti includere il tag <script> alla fine di body, ma questo non risolverà il tuo problema.

^{* ad essere onesti, non c'è buon momento per chiamare document.write(), evitatelo}

fonte

2012-05-28 13:41:46

Ho considerato 'document.write' e' document.writeLn' come artefatti che dovrebbero essere considerati deprecati nella pratica. Non l'ho usato in anni letteralmente. –

Quindi, in realtà, mi sono fatto scocciare il mio primo giorno di apprendimento di JavaScript da document.write, ma sono contento di averlo fatto mentre sto scoprendo un sacco di cose interessanti qui! Grazie per l'informazione! – deucalion0

Ho selezionato il tuo post come risposta come hai fornito un po 'più di informazioni! Cercherò di evitare document.write come standard! Saluti! – deucalion0

Non è possibile utilizzare document.write dopo che il documento è chiuso (che sarà quando onload incendi) senza distruggere il documento esistente (compresi i collegamenti ai fogli di stile).

Invece, utilizzare la manipolazione DOM, che è descritta nei capitoli 8 e 9 di W3C JavaScript Core Skills.

fonte

2012-05-28 13:40:24 Quentin

Che spiega perché il foglio di stile non sembra funzionare; è stato rimosso/sostituito ed è quindi un ' vuoto'. –

Grazie mille per aver segnalato PERCHÉ non funzionava, ero sconcertato! Ora sto cercando la manipolazione del DOM! Grazie! – deucalion0

Nel vostro esempio particolare non importa dove viene aggiunto il tag script come il comando document.write eseguito dopo che il contenuto è reso, sovrascrivendo il contenuto esistente.

Se si aggiunge un avviso prima di sovrascrivere il contenuto, è possibile vedere che la pagina è rossa prima di essere sovrascritta con Hello World.

fonte

2012-05-28 13:42:02 Nope

Grazie per il consiglio, ora ho scoperto i miei problemi! Grazie! – deucalion0

Foglio di stile ignorato quando si utilizza body onload e document.write

risposta

Problemi correlati