How to add value from a iframe using javascript? - javascript

I have a sample code:
in index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
</head>
<body>
<input type="text" value="" name="test" id="text_input">
<iframe src="iframe.html">
</body>
</html>
And iframe.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframe</title>
<script>
function getValue(text) {
document.getElementById('text_input').value = text;
}
</script>
</head>
<body>
Click
</body>
</html>
When click on a tag, value "text" can not be passed on from iframe to index.html, how to fix it ?

Use parent to get parent window of iframe. Try this
function getValue(text) {
parent.document.getElementById('text_input').value = text;
}

Related

even just alert('Hello'); won't run

I can't even get this to work. If I put a debug on the first line of javascript it never gets to it. I'm stumped.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function Hello()
{
alert('Hello');
}
</script>
</body>
</html>
You just forgot to invoke the function like this: Hello(). Here is the working snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function Hello()
{
alert('Hello');
}
Hello();
</script>
</body>
</html>
Need to call the function as follows
<script type="text/javascript">
function Hello()
{
alert('Hello');
}
Hello(); //----> function call
</script>
Just call the function
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function Hello()
{
alert('Hello');
}
Hello();
</script>
</body>
</html>

Javascript position of onchange assignment

I have a checkbox and a text input. I want that the text input is only enabled if the checkbox is checked. I found an answer to this problem here, but the following code did not work:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
<script type="text/javascript">
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = !this.checked;
};
</script>
</head>
<body>
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />
</body>
</html>
However, I noticed that the code works if I move the < script > environment below the < input > boxes like that
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
</head>
<body>
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />
<script type="text/javascript">
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = !this.checked;
};
</script>
</body>
</html>
Why does the position of the < script > environment play a role for the onchange attribute?
That's because the page is parsed from the top, and each element is added as soon as it is parsed.
When the script tag has been parsed the code will run right away. At that time the input tags hasn't been parsed, so the input elements doesn't exist yet.
By placing the script tag below the input tags, the script runs after the input elements has been created.
Instead of rearranging the code, you can use the onload event to make sure that the code runs after the page is completely parsed:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = !this.checked;
};
};
</script>
</head>
<body>
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />
</body>
</html>

pass property as argument in javascript

I am using the following code.I want to pass property bgcolor as argument
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function myFunction(key,valu)
{
document.body.key=valu;
}
</script>
</head>
<body onLoad="myFunction('bgColor','red');">
</body>
</html>
But it is not working.
you can try
document.body[key]=valu;
key is string in this case.
If you're passing a property as a string, you must use the square-bracket notation rather than dot notation:
function myFunction(key,valu)
{
document.body[key]=valu;
}
I suggest this since bgColor and onload attribute is so '90s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function setStyle(key,valu) {
document.body.style[key] = valu;
}
window.onload=function() {
setStyle("backgroundColor","red")
}
</script>
</head>
<body>
</body>
</html>
It won't work ever,
try this
function change(key , value)
{
document.body.setAttribute(key, value);
}

Simple javascript to read textox values and display on a blank page

I need a simple javascript that reads the value of the textbox (input) and possibly save it to a txt file or display on a blank page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<script type="text/javascript">
<!--
function getdata()
{
var val=document.getElementById('t1').value;
var win=open("");
win.document.write(val);
}
//-->
</script>
</head>
<body>
<input id="t1" type="text" />
<input id="B1" type="button" value="getdata" onclick="getdata()"/>
</body>
</html>

Javascript file (excanvas) not working when I load it at the bottom of the page

This works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="/js/msgv/widgets/excanvas2.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
function canvasTest(){
console.log("beginning canvasTest");
var b_canvas = document.getElementById("regularCanvas");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}
</script>
</head>
<body onLoad="canvasTest()">
<canvas id="regularCanvas" style="border: 1px dotted; float: left;" class="clear" height="225" width="300"></canvas>
</body>
</html>
This doesn't:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
The only difference between the two is where I'm loading it in the page. Everything works fine when I load excanvas in the head. I get an error when I load it at the bottom of the body.
<script type="text/javascript" charset="utf-8">
function canvasTest(){
console.log("beginning canvasTest");
var b_canvas = document.getElementById("regularCanvas");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}
</script>
</head>
<body onLoad="canvasTest()">
<canvas id="regularCanvas" style="border: 1px dotted; float: left;" class="clear" height="225" width="300"></canvas>
<script src="/js/msgv/widgets/excanvas2.js" type="text/javascript"></script>
</body>
</html>
It is well explained in the official documentation:
The excanvas.js file must be included in the page before any occurrences of canvas elements in the markup. This is due to limitations in IE and we need to do our magic before IE sees any instance of in the markup. It is recommended to put it in the head.

Categories