I'm trying to update the text in an iframe using a button and javascript.

silverglade · 07-28-2010, 09:17 PM

Hi, I can't get this to work, but I'm trying to update the text into an iframe on the same page with a button, for a game I'm making, the battle messages when you attack. Please any help greatly appreciated.

here is the html file with the button and onClick

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
body {
background-color: black;
color: gold;
}


</style>

</head>
<body>
<html>
<body>

<script type="text/javascript">
var my_var = "Hello World!"
	 

function text2add(){
return  '<font color=gold><strong>'+my_var+'</strong></font>';
}
</script>
<form> 
<form><input type="button"  value="change" onClick="text2add();"/></form>
Main page! Frame below.

<br><br>

<iframe src="iframe.html" ></iframe>

</body>
</html> 
</body>
</html>

and here is the iframe page code]

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
 document.write(parent.text2add());
 
</script>

This is my iframe 
</body>
</html>

Old Pedant · 07-28-2010, 10:10 PM

Is there a reason you are using an <iframe> instead of just a <div>???

Anyway, clearly it makes no sense to use the same function when creating the <iframe> as you do when later adding to it.

It might help if you'd show a more real example of what you are after.

For example, *WHERE* in the <iframe> do you want the text which is added via the button to appear???

Beagle · 07-29-2010, 02:26 AM

If you're going to use an iframe and it's going to load a page, you're best bet is to define a function on that page that makes the change you want, then name the iframe, then in the parent window call frameName.thatFunctionYouDefinedInThePageInTheIFrame();

That way, the button will always work as long as the function is defined, and you can make different functions per page in the iframe.