Here is a simple example. The iframe should load a server page that generates something similar to getchat.html provided:
chat.html
Code:
<html>
<head>
<style type="text/css">
textarea {
height: 250px;
width: 500px;
}
input {
width: 450px;
}
iframe {
display:none;
height: 0;
width: 0;
}
</style>
<script type="text/javascript">
function updateChat(items) {
var chatArea = document.getElementById("chatText");
var formattedChat = "";
for (var i=0; i < items.length; i++) {
var user = items[i].getElementsByTagName("span")[0].innerHTML;
var text = items[i].getElementsByTagName("span")[1].innerHTML;
formattedChat += user + ":\t" + text + "\n";
}
chatArea.value = formattedChat;
}
function sendChat() {
window.clearTimeout(chatTO);
window.frames["chatFrame"].location.href = "getchat.html?mychat=" + encodeURIComponent(document.getElementById("userInput").value);
chatTO = window.setTimeout(reloadChat, 1000);
}
function reloadChat () {
window.frames["chatFrame"].location.reload();
}
var chatTO;
window.onload = function () {
chatTO = window.setTimeout(reloadChat, 1000);
}
</script>
</head>
<body>
<form onsubmit="return false;">
<textarea id="chatText"></textarea><br/>
<input type="text" id="userInput" /><button onclick="sendChat();">Send</button>
</form>
<iframe name="chatFrame" src="getchat.html"></iframe>
</body>
</html>
getchat.html
Code:
<html>
<head>
<script type="text/javascript">
window.onload = function () {
parent.updateChat(document.getElementsByTagName("p"));
}
</script>
</head>
<body>
<p><span>jimfraser</span><span>Hi how are you doing?</span></p>
<p><span>DarkAngel</span><span>Good thanks and you?</span></p>
<p><span>jimfraser</span><span>Not so good, I was just run over by a bus</span></p>
<p><span>DarkAngel</span><span>Ouch! that must've hurt</span></p>
<p><span>jimfraser</span><span>Yeah it stings a little</span></p>
</body>
</html>
Posting Permissions
Bookmarks