Create dynamically an Iframe Using DOM


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 2 of 2

Thread: Create dynamically an Iframe Using DOM

  1. #1
    chhean Guest

    Create dynamically an Iframe Using DOM


    Hello,

    I'm trying to create an IFRAME dynamically using DOM and it doesn't work.
    Could you please help me ?

    Here is the sample:

    <html>
    <head>
    <title>test</title>
    <script language="JavaScript1.2">

    function MyIFrame ( nLeft, nTop, nWidth, nHeight, szUrl )
    {
    var oIFrame = document.createElement("iframe");
    oIFrame.style.position = "absolute";
    oIFrame.style.left = nLeft + "px";
    oIFrame.style.top = nTop + "px";
    oIFrame.style.width = nWidth + "px";
    oIFrame.style.height = nHeight + "px";
    oIFrame.style.visibility = "visible";
    oIFrame.style.zIndex = 1;
    return oIFrame
    }


    function init()
    {
    oFrame = new MyIFrame( 10, 10, 500, 400, "http://www.boursorama.com/liste/liste.phtml?num=1")
    document.body.appendChild(oFrame);
    }
    </script>
    </head>

    <body onLoad="init()" bgcolor="#669999">

    <iframe frameborder=no src="http://www.yahoo.fr" scrolling=auto style="LEFT:520px;
    TOP:10px; WIDTH:500px; HEIGHT:400px; Z-INDEX:1; position:absolute; visibility:visible">>
    </iframe>

    </body>
    </html>


  2. #2
    chhean Guest

    Re: Create dynamically an Iframe Using DOM


    Hi,
    it's me again. In the sample I provided the setAttribute are missing.
    The sample works with NS6 an not with IE5

    Here is the corrected sample

    <html>
    <head>
    <title>test</title>
    <script language="JavaScript1.2">

    function MyIFrame ( nLeft, nTop, nWidth, nHeight, szUrl )
    {
    var oIFrame = document.createElement("iframe");
    oIFrame.style.position = "absolute";
    oIFrame.style.left = nLeft + "px";
    oIFrame.style.top = nTop + "px";
    oIFrame.style.width = nWidth + "px";
    oIFrame.style.height = nHeight + "px";
    oIFrame.style.visibility = "visible";
    oIFrame.style.zIndex = 1;

    oIFrame.setAttribute("src", szUrl);
    oIFrame.setAttribute("scrolling", "auto");

    return oIFrame
    }


    function init()
    {
    oFrame = new MyIFrame( 10, 10, 500, 400, "http://www.yahoo.fr")
    document.body.appendChild(oFrame);
    }
    </script>
    </head>

    <body onLoad="init()" bgcolor="#669999">

    <iframe src="http://www.yahoo.fr" scrolling="auto" style="LEFT:520px; TOP:10px;
    WIDTH:500px; HEIGHT:400px; Z-INDEX:1; position:absolute; visibility:visible">>
    </iframe>

    </body>
    </html>


    Thanks.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center