...

View Full Version : new div in opener from iframe



Veda
05-08-2009, 06: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, 06: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 ...


var d = parent.document.createElement('div');

itsallkizza
05-08-2009, 10:47 PM
You can do it like this.

test.html:


<!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:


<!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, 02:36 AM
<!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 (http://softwareas.com/cross-domain-communication-with-iframes).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum