Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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');

  • #3
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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 10:54 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •