I am working on a script to get and change the content of an IFrame, by accessing a variable and a function defined in it, through a button and a Javascript script created in another IFrame. The script works fine, but what I would like to do is instead of text been injected in the IFRAME 1 I would like to inject a script, something like:
<script src="map.js" type="text/javascript"></script>
I have tried with injecting IMG and also works:
<button onclick="f_ifr2('<img height=\'410\' src=\'images\/footer.png\' width=\'995\' \/>')">
.... but I would like to be able to inject a js file something like:
<button onclick="f_ifr2('<script src=\'map.js\' type=\'text\/javascript\'><\/script>')">
but it doesn't work as something to do with the closing or opening tags < >
Could somebody tell me how to rewrite the:
<button onclick="f_ifr2('<script src=\'map.js\' type=\'text\/javascript\'><\/script>')">
to avoid the error? Many thanks!
The whole script below:
Code ifr1.htm
<html>
<head>
<title>Page for IFrame 1</title>
<script type="text/javascript"><!--
// Stores a value in the variable "var_ifr1", that will be accessed in the second iframe
var var_ifr1 = '<b>Value of the variable from iframe 1</b>';
// Function that replace the content of the DIV "div_ifr1" with the value of its parameter
// It will be called from iframe 2
function f_ifr1(txt) {
document.getElementById('div_ifr1').innerHTML = txt;
}
//--></script>
</head>
<body>
IFRAME 1
Content in BODY
<div id="div_ifr1">Div content of the iframe 1</div>
</body>
</html>
Code ifr2.htm
<html>
<head></head>
<title>Page for IFrame 2</title>
<body>
IFRAME 2<br>
<script type="text/javascript"><!--
function f_ifr2(txt) {
// get the BODY content of the iframe 1, "ifr1"
var c_ifr1 = parent.ifr1.document.body.innerHTML;
alert(c_ifr1); // Displays the content in an alert window
// gets the value of the variable "var_ifr1", defined in the iframe 1, "ifr1"
var from_ifr1 = parent.ifr1.var_ifr1;
// Displays in a tag in this iframe the value of the variable defined in iframe 1
document.getElementById('d_ifr2').innerHTML = from_ifr1;
// Calls the function "f_ifr1", defined in iframe 1
parent.ifr1.f_ifr1(txt);
}
//--></script>
<div id="d_ifr2"> </div>
<button onclick="f_ifr2('<b>The text changed from iframe 2</b>')">Action iframe</button>
</body>
</html>
Code main.html
<html>
<head><title>Main Page</title></head>
<body>
<h3>Main Page</h3>
<h4>First iframe</h4>
<iframe src="ifr1.htm" id="ifr1" name="ifr1"></iframe>
<br><h4>Second iframe</h4>
<iframe src="ifr2.htm" id="ifr2" name="ifr2"></iframe>
</body>
</html>