Example:-
I am creating an html page with name Demo1.html
I have an html component as
<div id=”div1”></div>
We could say
document.getElementById(‘div1’) which returns div1 object.
Demo1 Html file:-
<!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>Demo1</title>
<script type="text/javascript" language="javascript">
function clk()
{
alert(document.getElementById('div1'));
}
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value="div" onclick="clk();" />
</body>
</html>
Output:-
 |
Now I am creating an another html page say Demo2.html, with content same as Demo1 i.e;
<!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>Demo2</title>
<script type="text/javascript" language="javascript">
function clk()
{
alert(document.getElementById('div1'));
}
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value="div" onclick="clk();" />
</body>
</html>
Now I want access div tag whose id is “div1” available in Demo2.html from Demo1.html.
In such case, I would like place “iframe” object in Demo1.htm whose src is Demo2.html
Demo1.html:-
<!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>Demo1</title>
<script type="text/javascript" language="javascript">
function clk1()
{
alert(document.getElementById('div1'));
}
function clk2()
{
alert(dm2.document.getElementById('div1'));
}
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value="Demo1-div" onclick="clk1();" />
<br/><input type="button" value="Demo2-div" onclick="clk2();" />
<iframe src="demo2.htm" id="dm2"></iframe>
</body>
</html>
Output:-
Clicking on ="Demo2-div" button
 |
If required we can hide the iframe, so that user cannot view that Demo1.html is including Demo2.html.
Demo1.html:-
<!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>Demo1</title>
<script type="text/javascript" language="javascript">
function clk1()
{
alert(document.getElementById('div1'));
}
function clk2()
{
alert(dm2.document.getElementById('div1');
}
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value="Demo1-div" onclick="clk1();" />
<br/>
<input type="button" value="Demo2-div" onclick="clk2();" />
<iframe src="demo2.htm" id="dm2" style="display:none"></iframe>
</body>
</html>
Output:-
Clicking on ="Demo2-div" button
 |
No comments:
Post a Comment