Java Reference
In-Depth Information
Listing 8.43■
Die Webseite mit den versteckten IFrames
...
<link rel="stylesheet" type="text/css" href="lib/css/kap8_18.css" />
<script type="text/javascript" src="lib/js/kap8_18.js"></script>
</head>
<body>
<h1>Unsichtbare IFrames als Datenspeicher</h1>
<iframe src="kap8_18_1.html"></iframe>
<iframe src="kap8_18_2.html"></iframe>
<button>Bild 1</button><button>Bild 2</button>
<button>Bild 3</button><button>Bild 4</button><button>Bild 5</button>
<button>Text 1</button><button>Text 2</button><hr/>
<div id="td1"><img id="b1" /></div> <div id="td2"></div>
</body>
</html>
In dem Beispiel arbeiten wir mit zwei IFrames, in denen zwei HTML-Dateien geladen wer-
den. Diese IFrames werden mit CSS unsichtbar gemacht
(kap8_18.css):
Listing 8.44■
Der relevante Part der eingebundenen CSS-Datei
...
iframe {
display:none;
}
Interessant ist wieder hauptsächlich die externe JavaScript-Datei
kap8_18.js:
Listing 8.45■
Zugrif auf den Inhalt von IFrames
function bild(i) {
document.getElementById("b1").src =
window.frames[0].document.images[i].src;
}
function text(i) {
document.getElementById("td2").innerHTML =
window.frames[1].document.getElementsByTagName("h1")[i].innerHTML;
}
function init() {
with (document) {
getElementsByTagName("button")[0].onclick = function() {
bild(0);
}
getElementsByTagName("button")[1].onclick = function() {
bild(1);
}
getElementsByTagName("button")[2].onclick = function() {
bild(2);
}
getElementsByTagName("button")[3].onclick = function() {
bild(3);
}
getElementsByTagName("button")[4].onclick = function() {
bild(4);
}
getElementsByTagName("button")[5].onclick = function() {
text(0);
Search WWH ::
Custom Search