JS: nadien CSS en JS laden
Ik ben bezig met een ajax script en zou willen nadat de gewone html e.d. geladen is, dat een JS functie nog wat extra JS en CSS bestanden inlaadt.
Ik heb nu momenteel al dit: maar het werkt niet echt
Code (php)
1
document.getElementsByTagName("head")[0].innerHTML = includes;
in includes zit html code met js en css bestanden zoals normaal in een <header> tag
Waarom ik zo iets wil,
omdat ik (vooral JS) code wil inladen die niet meteen door de eerste beste n00b kan gecopieerd worden.
Ter beveiliging van mijn code dus ;-)
Of je gaat verder programmeren in java of flash. Het is en blijft html & javascript, dat krikg je niet waterdicht.
Code (php)
1
<script type="text/javascript">document.write("de data die je erin wil hebben");</script>.
Ik heb even wat opgezocht, zoiets bijvoorbeeld:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="test/javascript">
<? // voor de kleurtjes
function load()
{
// we maken een script tag
var scriptTag = document.createElement('script');
// we geven wat parameters
scriptTag.src = 'pad/naar/je/javascript.js';
// we maken een link tag (voor CSS)
var cssTag = document.createElement('link');
// weer een handje parameters
cssTag.rel = 'stylesheet';
cssTag.type = 'text/css';
cssTag.href = 'pad/naar/je/css.css';
// we zoeken de head op
var head = document.getElementsByTagName('head')[0];
// we flanzen de script en link in de head
scriptTag.appendChild(head);
cssTag.appendChild(head);
}
window.onload = load;
?>
</script>
<? // voor de kleurtjes
function load()
{
// we maken een script tag
var scriptTag = document.createElement('script');
// we geven wat parameters
scriptTag.src = 'pad/naar/je/javascript.js';
// we maken een link tag (voor CSS)
var cssTag = document.createElement('link');
// weer een handje parameters
cssTag.rel = 'stylesheet';
cssTag.type = 'text/css';
cssTag.href = 'pad/naar/je/css.css';
// we zoeken de head op
var head = document.getElementsByTagName('head')[0];
// we flanzen de script en link in de head
scriptTag.appendChild(head);
cssTag.appendChild(head);
}
window.onload = load;
?>
</script>
Het is niet getest, maar het zou moeten werken.
Gewijzigd op 01/01/1970 01:00:00 door - -
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<link rel="stylesheet" type="text/css" href="" id="csstag" />
<script type="text/javascript">
function init()
{
css = document.getElementById('csstag');
css.href = 'style.css';
}
window.onload = init;
</script>
</head>
</html>
<head>
<link rel="stylesheet" type="text/css" href="" id="csstag" />
<script type="text/javascript">
function init()
{
css = document.getElementById('csstag');
css.href = 'style.css';
}
window.onload = init;
</script>
</head>
</html>
voorbeeld: http://casteleyn.no-ip.info:8080/~Hipska/RPG/test.html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>RPG Game</title>
<link rel="stylesheet" href="graphics/style.css" type="text/css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function load(){
new Ajax.Request( 'request.php', {parameters: {action:'load'}, onSuccess: function(ts){
document.open();
document.write(ts.responseText);
document.close();
} } );
}
</script>
</head>
<body onload="load()" id="window">
<div id="field">
<div id="content">
Deze tekst zie je als je javascript niet aanstaat.
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>RPG Game</title>
<link rel="stylesheet" href="graphics/style.css" type="text/css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function load(){
new Ajax.Request( 'request.php', {parameters: {action:'load'}, onSuccess: function(ts){
document.open();
document.write(ts.responseText);
document.close();
} } );
}
</script>
</head>
<body onload="load()" id="window">
<div id="field">
<div id="content">
Deze tekst zie je als je javascript niet aanstaat.
</div>
</div>
</body>
</html>
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div id="field">
<div id="tiles">Loading tiles ...</div>
<div id="sprites">Loading sprites ...</div>
<div id="mychar" class="char">Loading<br>player ...</div>
<div id="nav">
wow!<p>dit komt uit de JS en is dus onzichtbaar PHPhulp</p>
<script>alert("geladen JS werkt");</script>
</div>
</div>
<div id="tiles">Loading tiles ...</div>
<div id="sprites">Loading sprites ...</div>
<div id="mychar" class="char">Loading<br>player ...</div>
<div id="nav">
wow!<p>dit komt uit de JS en is dus onzichtbaar PHPhulp</p>
<script>alert("geladen JS werkt");</script>
</div>
</div>
Helaas kan ik even niet achter het hele html-document komen, ik ben vergeten hoe je document.innerHTML ook al weer deed in Safari :/
edit: alert(document.documentElement.innerHTML) levert op:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<body id="window">
<div id="field">
<div id="tiles">Loading tiles ...</div>
<div id="sprites">Loading sprites ...</div>
<div id="mychar" class="char">Loading<br>player ...</div>
<div id="nav">
wow!<p>dit komt uit de JS en is dus onzichtbaar PHPhulp</p>
<script>alert("geladen JS werkt");</script>
</div>
</div>
</body>
<div id="field">
<div id="tiles">Loading tiles ...</div>
<div id="sprites">Loading sprites ...</div>
<div id="mychar" class="char">Loading<br>player ...</div>
<div id="nav">
wow!<p>dit komt uit de JS en is dus onzichtbaar PHPhulp</p>
<script>alert("geladen JS werkt");</script>
</div>
</div>
</body>
edit 2: zo te zien is dat zo ongeveer het rauwe antwoord dat request.php oplevert.
Wat de Web Inspector van Safari & Firebug voor Firefox je niet allemaal kan leren >:)
Gewijzigd op 01/01/1970 01:00:00 door Jelmer -
ik ga het nu gewoon gebruiken om een Javascript controle in te voegen.
dus dat JS moet aanliggen