SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast fatlip007's Avatar
    Join Date
    Sep 2003
    Location
    Essex, England
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help, using JS to change a child windows Iframe

    I'm currently working on a site that consists of several Iframes. I need to create a page that will load this site with a specific page in the main Iframe as opposed to the normal index page. So far I've simply created a dummy page that opens up the site in a new window and attempts to change the location of the main content Iframe using this piece of js:

    Code:
    function init()
    {
    
    	var site = window.open('index.htm', '', '');
    	site.document.content.location = 'news_caster.htm';
    	this.close();
    }
    But this throws an error, 'content' is the name of the Iframe i'm trying to change btw. Does anybody know how I can do this?

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Netherlands
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code:
    function init()
    {
    
    	var site = window.open('index.htm', '', '');
    	contentFrame = site.document.getElementById("content");
                 contentFrame.src = 'news_caster.htm';
    	this.close();
    }
    
    should do the job.

  3. #3
    SitePoint Enthusiast fatlip007's Avatar
    Join Date
    Sep 2003
    Location
    Essex, England
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick reply Atrix. I gave that a go, but I get an error about 'contentFrame' being null or not an object, so it seems that it can't find the content Iframe, even though it definately exists in the index.htm page!

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Netherlands
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is the code of the index.htm page? Indeed it can't find the iframe object.. strange.
    Little bit of this and a liitle bit of that should do the job

  5. #5
    SitePoint Enthusiast fatlip007's Avatar
    Join Date
    Sep 2003
    Location
    Essex, England
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the code for the index page, I've highlighted the content Iframe. I can't really see why it isn't working, maybe its because the IFrame is contained in a div?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>talk2Utime - Integrated IM and VoIP solutions</title>
    <link rel="stylesheet" type="text/css" href="style/t2ut.css" />
    <script type="text/javascript" language="JavaScript">
    <!--
    function Over(name)
    {
        document[name].src = "img/button_"+name+"_over.gif";
    }
    
    function Out(name)
    {
    	document[name].src = "img/button_"+name+".gif";
    }
    function subIt()
    {
    	var f = document.login;
    	if(f.pswd.value.length>0 && f.email.value.length>0)
    	{
    		return true;
    	}
    	else
    	{
    		alert('Please fill in your login details.');
    		return false;
    	}
    }
    //-->
    </script>
    <script type="text/javascript" language="JavaScript" src="scripts/preload.js"></script>
    </head>
    <body onload="preload('img/button_home_over.gif','img/button_documentation_over.gif','img/button_corporate_over.gif','img/button_contact_over.gif','img/button_products_over.gif')">
    <!-- Header Div -->
    <div id="header_div">
    <table cellpadding="0px" cellspacing="0px">
    <tr><td colspan="6"><img src="img/moving-strip.gif" alt="" style="height: 70px" /></td></tr>
    <tr>
    <td style="width: 120px"><a href="index.htm" onmouseover="Over('home'); return true;" onmouseout="Out('home'); return true;" title="talk2Utime Homepage"><img src="img/button_home.gif" name="home" alt="talk2Utime Homepage" /></a></td>
    <td style="width: 120px"><a href="resources.htm" target="content" onmouseover="Over('documentation'); return true;" onmouseout="Out('documentation'); return true;" title="View documentation for talk2Utimes products/services"><img src="img/button_documentation.gif" name="documentation" alt="View documentation for talk2Utimes products/services" /></a></td>
    <td style="width: 120px"><a href="products.htm" target="content" onmouseover="Over('products'); return true;" onmouseout="Out('products'); return true;" title="See our range of products &amp; services"><img src="img/button_products.gif" name="products" alt="See our range of products &amp; services" /></a></td>
    <td style="width: 120px"><a href="http://www.talkics.com/index.htm" onmouseover="Over('corporate'); return true;" onmouseout="Out('corporate'); return true;" title="Visit the ICS corporate solutions website"><img src="img/button_corporate.gif" name="corporate" alt="Visit the ICS corporate solutions website" /></a></td>
    <td style="width: 83px"><a href="contact_form.htm" target="content" onmouseover="Over('contact'); return true;" onmouseout="Out('contact'); return true;" title="Contacts us via email"><img src="img/button_contact.gif" name="contact" alt="Contacts us via email" /></a></td>
    <td><img src="img/menu_end.gif" alt="" /></td></tr>
    </table>
    </div>
    <!-- Content Div -->
    <div id="central_pane" class="colour2">
    <table cellpadding="0" cellspacing="0" style="width: 100%; height:100%">
    <tr style="height:100px; vertical-align:top"><td><img src="img/banner_main.jpg" alt="Call us on +44(0)870 0509910" style="height:100px" /></td></tr>
    <tr><td class="bodytext" style="vertical-align:top; padding-top: 3px">
    <iframe scrolling="no" frameborder="0" style="height: 440px; width: 440px; border: none; padding: 0px; margin:0px" src="home_content.htm" name="content"></iframe>
    </td></tr>
    </table>
    </div>
    <!-- Left pane Div -->
    <div id="left_pane">
    <table cellpadding="0px" cellspacing="0px" style="height: 435px; width: 100%" class="colour1">
    <tr><td style="height: 45px; vertical-align: top; padding: 5px 5px 0px 5px">
    <img src="img/text_leftpane.gif" alt="" /></td></tr>
    <!-- Links Box -->
    <tr><td style="padding: 5px 5px 0px 5px; text-align: center; vertical-align: top">
    <iframe marginwidth="0" marginheight="0" scrolling="no" frameborder="0" style="height: 375px; width: 100%; border: none; padding: 0px; margin: 0px" src="left_pane_links.htm" name="left_pane"></iframe>
    </td></tr>
    </table>
    </div>
    <!-- Right pane Div -->
    <div id="right_pane">
    <table cellpadding="0px" cellspacing="0px" style="height: 435px; width: 100%" class="colour3">
    <tr><td style="height: 45px; vertical-align: top; padding: 5px 5px 0px 5px">
    <img src="img/text_rightpane.gif" alt="" /></td></tr>
    <!-- Links Box -->
    <tr><td style="padding: 2px 5px 0px 5px; text-align: center; vertical-align: top">
    <iframe marginwidth="0" marginheight="0" scrolling="no" frameborder="0" style="height: 375px; width: 100%; border: none; padding: 0px; margin: 0px" src="right_pane_links.htm" name="right_pane"></iframe>
    </td></tr>
    </table>
    </div>
    <!-- Left box Div -->
    <div id="left_box">
    <table cellpadding="0px" cellspacing="0px" style="width:100%; height:100%">
    <tr style="height:15px"><td style="padding-left:5px" class="colour4"><img src="img/text_news_header.gif" border="0" alt="ICS News" /></td></tr>
    <tr><td style="padding-top:1px; padding-bottom:1px" class="colour5">
    <iframe marginwidth="0" marginheight="0" scrolling="no" frameborder="0" style="height: 75px; width: 220px; border: none; padding: 0px; margin:0px" src="news_box.htm" name="news"></iframe></td></tr>
    </table>
    </div>
    <!-- Right box Div -->
    <div id="right_box">
    <table width="100%" cellpadding="0px" cellspacing="0px" style="height:100%">
    <tr style="height:15px"><td style="padding-left:5px" class="colour4"><img src="img/text_login_header.gif" border="0" alt="ICS User Login" /></td></tr>
    <tr><td class="colour5" style="padding:5px; text-align: center; vertical align: top">
    <form action="https://www.talk2utime.com/t2ut/smartlogin.jsp" target="_new" name="login" method="post" onsubmit="return subIt()" style="padding: 0px; margin: 0px">
    e-mail:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" class="post" size="25" name="email" /><br />
    password:&nbsp;&nbsp;<input type="password" class="post" size="25" name="pswd" /><br /><br />
    <input src="img/button_login.gif" type="image" />
    </form>
    </td></tr>
    </table>
    </div>
    <div id="footer">
    talk2Utime&reg; is a registered trademark of International Communications Systems
    </div>
    </body>
    </html>

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Netherlands
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Owwww.. :-)

    You haven't set the id attribute of the iframe, only the name attribute. so set the Id attribute and it should be fine.
    Little bit of this and a liitle bit of that should do the job

  7. #7
    SitePoint Enthusiast fatlip007's Avatar
    Join Date
    Sep 2003
    Location
    Essex, England
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just tried adding id="content" into the Iframe tag and it's still giving me the same error. How frustrating, it looks like it should work, but it doesn't!

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Netherlands
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm, copied the code, without changing anything, seems ok, no errors.. :-(
    Little bit of this and a liitle bit of that should do the job

  9. #9
    SitePoint Enthusiast fatlip007's Avatar
    Join Date
    Sep 2003
    Location
    Essex, England
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Really? Damn it still won't work for me. Thanks for the help Atrix, I'll keep playing around with it and see if I can get it working. I've probably made a silly error somewhere!


Bookmarks

Posting Permissions

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