new div in opener from iframe

Veda · 05-08-2009, 05:00 PM

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

adios · 05-08-2009, 05:14 PM

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');

itsallkizza · 05-08-2009, 09:47 PM

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>

adios · 05-09-2009, 01:36 AM

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.