#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    6
    Rep Power
    0

    Change href in another frame


    Hello,

    I've just started Javascript and am having issues with setting a link's href in another frame. I have this:

    Code:
    <html>
    	<frameset cols="50%, 50%">
    		<frame src="./left.html" id="left_frame">
    		<frame src="./right.html" id="right_frame">
    	</frameset>
    </html>
    Contents of left.html:

    Code:
    <html>
    	<h1>Left</h1>
    	<br>
    	<body>
    		<a id="left_link" href="http://www.google.co.za" target="_blank">Click</a>
    	</body>
    </html>
    Contents of right.html:

    Code:
    <html>
    	<head>
    		<script>
    			function change() {
    				parent.left_frame.document.getElementById("left_link").href = "http://www.getdota.com";
    				alert("Done");
    			}
    		</script>
    	</head>
    	<h1>Right</h1>
    	<br>
    	<body>
    		<a href="javascript:change()">Change</a>
    	</body>
    </html>
    Basically, when the link in the right frame is clicked, I want the href of the link in the left frame to be changed.

    Any help would be appreciated.

    Mr_Bean
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    Do an online search for "iframe communication" and "same domain iframe communication". You should be able to find some incite, on how to accomplish what your wanting to do, in those search results.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2012
    Posts
    56
    Rep Power
    28
    Based on the sample code given, if all you are wanting is a link in one frame to cause another frame to navigate to a new page you do not need javascript to achieve this.

    Each frame needs a name. I'll just change the "id" to name.
    Code:
    <html>
    	<frameset cols="50%, 50%">
    		<frame src="./left.html" name="left_frame">
    		<frame src="./right.html" name="right_frame">
    	</frameset>
    </html>
    Right making left go to a new page (abbreviated) :
    Code:
    <a target="left_frame" href="http://www.getdota.com">Change</a>
    Further help on this can be found in the html section of these forums.

    There are reasons why you might want to use javascript to load a page in another frame, so you should proceed with the instructions above to learn how.
    Last edited by efilnikufecin; February 26th, 2013 at 02:44 AM.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    6
    Rep Power
    0
    I don't want to do that. I want to change the href of a hyperlink in another frame.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    6
    Rep Power
    0
    I have decided to try a different approach.
    However, I can't seem to get global variables working.
    In my external file, script.js, I have this:

    Code:
    window.backLink = null;
    	
    function displayPage(page, back) {
    	backLink = back;
    	parent.main.location = page;
    	alert(backLink); // displays back.html.
    }
    
    function backClicked() {
    	alert(backLink); // displays null.
    	parent.main.location = backLink;
    }
    Then I call displayPage:
    Code:
    displayPage('main.html', 'back.html');
    backClicked is called when a button is pressed.
    Please can someone help? This is urgent and I need to get it working.
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    218
    Rep Power
    32
    I always think that there are actually 2 'models' in a modern XHTML page, and we could access any elements (as long as the pages - which they belong to - are from the same domain) using 2 ways: either traditional HTML or XML DOM.

    So in your case the pages might look like the following:

    PARENT:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"
    <
    html xmlns="http://www.w3.org/1999/xhtml">

    <
    head>
        <
    title>Parent</title>
        <
    meta content="text/html; charset=utf-8" http-equiv="content-type" />
    </
    head>

    <
    frameset cols="50%, 50%">
        <
    frame src="left.html" name="left_frame" id="left_frame">
        <
    frame src="right.html" name="right_frame" id="right_frame">
    </
    frameset>

    </
    html
    LEFT:
    PHP 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>
        <
    title>left</title>
        <
    meta content="text/html; charset=utf-8" http-equiv="content-type" />
    </
    head>

    <
    body>
        <
    h1>Left</h1>
        <
    a name="left_link" id="left_link" href="http://www.google.co.za" target="_blank">Click</a>
    </
    body>

    </
    html
    RIGHT:
    PHP 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>
        <
    title>right</title>
        <
    meta content="text/html; charset=utf-8" http-equiv="content-type" />
        <
    script type="text/javascript">
            function 
    change() {
                
                
    //traditional HTML way, use the 'name' attributes
                //var href = parent.frames['left_frame'].document.anchors['left_link'].href;
                
                //modern XML DOM way, must use the 'id' attributes
                
    var href parent.document.getElementById('left_frame').contentDocument.getElementById('left_link').href;
                
                
    alert(href);
            }
        
    </script>
    </head>

    <body>
        <h1>Right</h1>
        <a href="javascript:void(change());">Change</a>
    </body>
        
    </html> 
    Just make sure you don't mix a way with the other, or you'll get confused soon
    Last edited by hdewantara; February 26th, 2013 at 03:26 PM.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    6
    Rep Power
    0
    Thanks so much, this has helped me greatly.
    Unfortunately I have to use traditional HTML, because it's for an assignment.
    What should I put at the top of every HTML document (i.e. things for verification)?

    Also, would this still work if the Javascript was placed in an external file?

    Another question: If I have a Frameset in a Frameset, would this still work (parent.frames['left_frame'].document.anchors['some_link'].href)?

    Thanks again.
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    218
    Rep Power
    32
    You're welcome Mr_Bean.

    What should I put at the top of every HTML document (i.e. things for verification)?
    You might want to look here as a start. Careful though that some of w3schools articles aren't precise.

    Also, would this still work if the Javascript was placed in an external file?
    Yes of course!

    Another question: If I have a Frameset in a Frameset, would this still work (parent.frames['left_frame'].document.anchors['some_link'].href)?
    Hmm, bad news I'm afraid: have just found that this traditional method doesn't work in my IE.8 for your original problem
    As for frameset w/in frameset, err I havn't tested that, what have you found out?

    Hint: if you're exploring this with FF.19, run your page and then press Ctrl-Shift-K; it will bring out FF's Web-Console tool to the bottom of your page. Start typing "parent." and you'll get a long list of elements you could trace further...

IMN logo majestic logo threadwatch logo seochat tools logo