Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 05-08-2009, 05:00 PM   PM User | #1
Veda
New to the CF scene

 
Join Date: May 2009
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Veda is an unknown quantity at this point
new div in opener from iframe

Hello,

I have a iframe and inside this iframe a webpage. I want to create with code inside the iframe a div on the page outside the iframe (on the opener).
But i can't get this working. How can i do this?

Veda
Veda is offline   Reply With Quote
Old 05-08-2009, 05:14 PM   PM User | #2
adios
Senior Coder

 
Join Date: Jun 2002
Posts: 1,404
Thanks: 2
Thanked 32 Times in 32 Posts
adios is on a distinguished road
First of all, the two documents - the iframe page and the page it's embedded in - must be from the same domain ("same origin policy"). If that's the case, you'll need to call DOM methods inside the containing page, not the iframe page. A document's DOM methods (like createElement) cannot be called to modify another document in another window. Would help to see some code ...

Code:
var d = parent.document.createElement('div');
adios is offline   Reply With Quote
Old 05-08-2009, 09:47 PM   PM User | #3
itsallkizza
Senior Coder

 
Join Date: Oct 2008
Location: Long Beach
Posts: 1,196
Thanks: 36
Thanked 164 Times in 164 Posts
itsallkizza will become famous soon enough
You can do it like this.

test.html:
Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Outer Page</title>
<style type="text/css">
#my_div
{
background-color: #ff0000;
border: 1px solid #000000;
padding: 80px 120px;
}
</style>
<script type="text/javascript">
// <![CDATA[

function showDiv()
	{
	document.getElementById("my_div").style.display = "block";
	}

// ]]>
</script>
</head>
<body>

<div id="my_div" style="display:none;">heeey!</div>

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

</body>
</html>
test2.html:
Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Inner Page</title>
<script type="text/javascript">
// <![CDATA[

function showParentDiv()
	{
	parent.showDiv();
	return false;
	}

// ]]>
</script>
</head>
<body>

<a href="#" onclick="return showParentDiv()">show div inside parent frame</a>

</body>
</html>
__________________
Feel free to e-mail me if I forget to respond ;)
ohsosexybrit@gmail.com
itsallkizza is offline   Reply With Quote
Old 05-09-2009, 01:36 AM   PM User | #4
adios
Senior Coder

 
Join Date: Jun 2002
Posts: 1,404
Thanks: 2
Thanked 32 Times in 32 Posts
adios is on a distinguished road
Code:
<!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</title>
<style type="text/css">
#oldDIV {
width: 300px;
height: 200px;
margin: 100px;
padding: 30px;
border: 1px black dashed;
background: pink;
}
iframe {
border: 1px darkred solid;
}
</style>
<script type="text/javascript">

function IframeDoc()
{
	var sHTML = "";
	sHTML += "<html><head>";
	sHTML += "<script type='text/javascript'>";
	sHTML += "function createDIVinParent()";
	sHTML += "{";
	sHTML += "   var p = parent.document;";
	sHTML += "   var newDIV = p.createElement('div');";
	sHTML += "   newDIV.setAttribute('title', 'NEW DIV');";
	sHTML += "   newDIV.style.width = '200px';";
	sHTML += "   newDIV.style.height = '100px';";
	sHTML += "   newDIV.style.margin = '20px';";
	sHTML += "   newDIV.style.padding = '10px';";
	sHTML += "   newDIV.style.background = 'tan';";
	sHTML += "   newDIV.style.border = '1px black solid';";
	sHTML += "   newDIV.appendChild(p.createTextNode('newDIV'));";
	sHTML += "   var oldDIV = p.getElementById('oldDIV');";
	sHTML += "   oldDIV.appendChild(newDIV);";
	sHTML += "}";
	sHTML += "<\/script></head><body><tt>iframe</tt><hr />";
	sHTML += "<input type='button' value='do it' ";
	sHTML += "onclick='createDIVinParent()'>";
	sHTML += "</body></html>";
	return sHTML;
}

</script>
</head>
<body>
<iframe frameborder="no" src="javascript:parent.IframeDoc()"></iframe>
<div id="oldDIV">oldDIV</div>
</body>
</html>
Just an example. In practice, you'd put the sHTML string in a file and set the src of the iframe to it; this is just a document-on-the fly for these forums. Note the calling of DOM properties in the parent, not in the iframe document.

http://www.dyn-web.com/tutorials/iframes/#refs

Interesting article here.

Last edited by adios; 05-09-2009 at 09:54 PM..
adios is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 09:03 AM.


Advertisement
Log in to turn off these ads.