Replace contents of <iframe>

Basscyst · 10-12-2003, 05:28 PM

I have an iframe that starts out blank. Then when the user clicks a button in writes some info to the iframe. Problem I'm having is that when they click a second button it doesn't overwrite whats in the iframe it just adds to it.

Example Code:

<html>
<head>
<script language="javascript">

function writeStuff(){
pane.document.write("hello");
}
</script>
</head>
<body>
<input type="button" value="Write" onclick="writeStuff()">
<iframe src="blank.html" id="pane" height="265" width="345"

frameBorder=0 style="position:absolute;left:22px;top:103px;"></iframe>
</body>
</html>

nolachrymose · 10-12-2003, 05:45 PM

Try this:

Code:

function writeStuff(html) {
document.getElementById("pane").document.body.innerHTML = html;
}

Hope that helps!

Happy coding!

Basscyst · 10-12-2003, 05:51 PM

Again you put me on the "write" (<-pun) track. Did need a little modification your example replaced the parent.

function writeStuff(html) {
window.pane.document.body.innerHTML = html;
}

Did the trick.

Thanks Again!

Basscyst · 10-12-2003, 08:50 PM

OK - last question and I'll leave you all alone for a while. I've got it to replace the text as desired only problem is now the info inside my loop doesn't stay inside my table. This worked when I was using document.write to the iframe but not with innerHTML.

I create the table outside the loop, add rows inside the loop, and close the table after the loop.

Any Suggestions?

CODE:
<html>
<head>
<script language="javascript">
var fruitlist=new Array();
fruitlist[0]="Apples";
fruitlist[1]="Bannanas";
fruitlist[2]="Pears";
fruitlist[3]="Peaches";

function displayFruit(){
pane.document.body.innerHTML=("<table border=1><tr><td>Fruit</td></tr>");
for(i=0;i<fruitlist.length;i++){
pane.document.body.innerHTML+=("<tr><td>" + fruitlist[i] + "</td></tr>");
}
pane.document.body.innerHTML+=("</table>");
}
</script>
<body>
<a href="#" onclick="displayFruit()">Show Fruit</a>
<iframe src="" id="pane" height="265" width="345" frameBorder=0 style="position:absolute;left:22px;top:103px;"></iframe>
</body>
</html>

nolachrymose · 10-12-2003, 09:01 PM

Code:

<html>
<head>
<script language="javascript">
var fruitlist=new Array();
fruitlist[0]="Apples";
fruitlist[1]="Bannanas";
fruitlist[2]="Pears";
fruitlist[3]="Peaches";

function displayFruit() {
	var htmlStr = "";
	htmlStr += "<table border=1><tr><td>Fruit</td></tr>";
	for(var i = 0; i < fruitlist.length; i++) {
		htmlStr += "<tr><td>" + fruitlist[i] + "</td></tr>";
	} htmlStr += "</table>";
	window.frames["pane"].document.body.innerHTML = htmlStr;
}
</script>
<body>
<a href="#" onclick="displayFruit(); return false;">Show Fruit</a>
<iframe src="" name="pane" id="pane" height="265" width="345" frameBorder=0 style="position:absolute;left:22px;top:103px;"></iframe>
</body>
</html>

Hope that helps!

Happy coding!

Basscyst · 10-12-2003, 09:51 PM

That was easy enough I should have thought of that, guess that's what I get for coming to work on a Sunday.

Thanks Again!