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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple two target hyperlink

    This is probably amazingly simple... and I'm completely retarded or something;
    But my goal here is to have a link that opens two different pages, targeting two different IFRAMEs.

    I'm using :
    <a href="Javascript:" onclick="window.open('/mainleft.htm', 'mainleft'); window.open('/mainright.htm', 'mainright');">. . . h o m e . . .</a>
    mainleft and mainright being the two IFRAMEs I'm trying to target.
    This line of code ACTUALLY does work, the pages open.
    But Firefox brings up the error console, with either nothing there, or once said something about a 'cursor' error or something.

    Is something simply written slightly wrong for this instance?

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Try this instead.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> new document </title>
    <script type="text/javascript">
    function doIt()
       {
       document.getElementById("frame1").contentWindow.location.href="http://www.google.com";
       document.getElementById("frame2").contentWindow.location.href="http://www.yahoo.com";
       return false;
       }
    </script>
    </head>
    
    <body>
    <a href="#" onclick="doIt()">clicky</a>
    <iframe id="frame1" src="test1.html" height="200" width="200">/</iframe>
    <iframe id="frame2" src="test2.html" height="200" width="200">/</iframe>
    </body>
    </html>

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What if I wanted other Links to open to the two frames as well?
    Would I have to make other functions for those as well?

    Is there an easier way than that?

  • #4
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Functions make your life easier because of the embedded quotes issue, and just ease of reading. You can just put it inline if you want,

    Code:
    <body>
    <a href="#" onclick="document.getElementById('frame1').contentWindow.location.href = 'http://www.google.com'; document.getElementById('frame2').contentWindow.location.href = 'http://www.yahoo.com';return false;">clicky</a>
    <iframe id="frame1" src="test1.html" height="200" width="200">/</iframe>
    <iframe id="frame2" src="test2.html" height="200" width="200">/</iframe>
    </body>
    or you can make a more generic function like so.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> new document </title>
    <script type="text/javascript">
    function openLinks(url1, url2)
       {
       document.getElementById("frame1").contentWindow.location.href=url1;
       document.getElementById("frame2").contentWindow.location.href=url2;
       return false;
       }
    </script>
    </head>
    
    <body>
    <a href="#" onclick="openLinks('http://www.google.com','http://www.yahoo.com')">clicky</a>
    <iframe id="frame1" src="test1.html" height="200" width="200">/</iframe>
    <iframe id="frame2" src="test2.html" height="200" width="200">/</iframe>
    </body>
    </html>

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Alternatively, you could use a PHP script in the document to set the iframe content pages according to two parameters passed in the href of the link.

    (rough) e.g.
    Code:
    <?php
    
    $iframe1 = (!empty($_GET['iframe1'])) ? $_GET['iframe1'] : 'iframe1default.php';
    $iframe2 = (!empty($_GET['iframe2'])) ? $_GET['iframe2'] : 'iframe2default.php';
    
    ?>
    
    ...
    
    <iframe id="frame1" src="<?php echo $iframe1 ?>"></iframe>
    <iframe id="frame2" src="<?php echo $iframe2 ?>"></iframe>
    
    ...
    
    <a href="/thispage.php?iframe1=newpage1.php&iframe2=newpage2.php">two iframes, one link</a>

    Just a thought.

  • #6
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Bear in mind if you do it that way, the user can simply put any page they like in the URL. They can try to get at your admin scripts.
    This can be a vulnerability. It exists the javascript way as well, but it's a little harder to get at.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #7
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by nikkiH View Post
    Bear in mind if you do it that way, the user can simply put any page they like in the URL.
    Any user with a modicum of js knowledge could do the same.
    Still, if they chose to present an off-site page within the iframes whilst they're viewing your site, the only person it effects is them and their session, so it's a bit of a non-issue, as far as I'm concerned.

    If you're talking about people passing on links containing fake parameter urls to others, then it's easy enough to build in some server-side checks which ensure that the script only accepts page values from the same site, non-absolute hrefs or those from a specific list.
    I invariably would build in such checks, but then I did mark it as a rough example, precisely to show the concept, rather than a full, secured example of the script.


    I personally would use the PHP-based approach, not least because it improves on the usability (by making the iframe configuration bookmarkable), but also because it improves the baseline accessibility by making the dual iframe page changes available in the absence of js.

    I'm not particularly an accessibility evangelist, but when a more accessible method, which also improves usability, presents itself so clearly, I say go with it.

  • #8
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I found when I used this:
    <a href="#" onclick="window.open('/mainleft.htm', 'mainleft'); window.open('/mainright.htm', 'mainright')";>. . . h o m e . . .</a>
    It works wonderous! Thanks for all your suggestions! I may still use them :]

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by xTierialx View Post
    I found when I used this:

    Code:
    <a href="#" onclick="window.open('/mainleft.htm', 'mainleft'); window.open('/mainright.htm', 'mainright')";>. . . h o m e . . .</a>
    It works wonderous! Thanks for all your suggestions! I may still use them :]
    Fwiw, that second semi-colon belongs inside the quotes.

    i.e.
    Code:
    <a href="#" onclick="window.open('/mainleft.htm','mainleft'); window.open('/mainright.htm','mainright');">. . . h o m e . . .</a>
    Also fwiw, if the link is meant to reset the frames to their default, 'home' configuration, then it may be an option to simply reload the home page, possibly using target="_top". The iframes contained within the home page will revert to their default content pages when it loads.

    Lastly, I'd be interested to know why you opted for the js-dependent approach. Is PHP available to you on your host space?


  •  

    Posting Permissions

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