...

View Full Version : 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:


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
<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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum