How do I change the URL of the "parent" frame?

26,013

Solution 1

javascript:

window.top.location = 'anther url'

--UPDATE to your updated question

use element.getAttribute('value') instead of element.value

--UPDATE #2 Use the href attribute, however, add a return false; to the onclick function:

<a onclick="url_update(this);return false;" value="test/test.html" href="test/test.html">test link</a>

Once you are doing that, you might aswell skip the value attribute and just use the href property, update your url_update function to use element.href instead of element.value

Solution 2

It's hard to tell from your question exactly which frames are doing what, but if The Scrum Meister's solution works for you, than you can easily implement what you want by adding this to each of your A tags.

 target="_top"

Your example modified.

<a href="test/test.html" target="_top">test link</a> 

You could also do this with jquery... On the page where all A tags should have target="_top" you can implement the following jquery code on the page and it will dynamically add the target to all links.

<script language="javascript" type="text/javascript">
$(function()
{
     $("A").attr("target","_top");
});
</script>

That is assuming that you have normail A tags with the href attribute, you can get rid of the onclick all together, no other javascript is required with the target solution.

Solution 3

First you need to be on the same domain... otherwise for security reasons you can not change it. Declare and call this function in your child frame

function change(theUrl){

window.parent.reloadContent(theUrl);
}

In your parent have the following function :

function reloadContent(theUrl){
  if (theUrl != ""){ 
      document.getElementById("frameID").src= theUrl ; 
  } 
}
Share:
26,013
ubiquibacon
Author by

ubiquibacon

ubiq·ui·ba·con - a side of a pig cured and smoked existing or being everywhere at the same time.

Updated on July 09, 2022

Comments

  • ubiquibacon
    ubiquibacon almost 2 years

    I have a website which I host myself. I do not have a static IP address so I have all traffic for my domain forwarded with masking to my DDNS account. The resulting page looks like this...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <title>mydomianname.com</title>
    </head>
    <frameset rows="100%,*" border="0">
      <frame src="http://myddns.dyndns.org/mydomainname" frameborder="0" />
      <frame frameborder="0" noresize />
    </frameset>
    </html>
    

    How can I update the URL of the "parent" frame as users navigate within the "child" frame?

    UPDATE: Success?

    I have tried doing this with javascript but had an issue getting the correct href to my javascript function with out having adverse side effects (having two windows open up, having my main window go to the wrong location, or making it so the back button didn't work right). All I needed was an attribute of my a tag to hold a value that I could use in my javascript, but would do nothing else at all. Adding the attributed value event though it is not a native attribute to the a tag works great.

    The a tag...

    <a onclick="url_update(this);" value="test/test.html" href="javascript:void(0);">test link</a>
    

    and the javascript function...

    function url_update(element){
        base_url = 'http://mydomain.com/';
        window.parent.location.href = base_url + element.getAttribute('value');
    }
    

    the resulting updated URL is...

    http://mydomain.com/test/test.html
    

    ... and there are none of the previously mentioned side effects.

    The only "side effect" that I would like to fix is display of the link in the info bar at the bottom of a browser window. Right now it says javascript:void(0); because that is what is written in my href attribute, but I would like it to show the updated URL when the link is hovered over... any thoughts?

    It would be even better if I could scrap all of this javascript and use IIS 7 URL Rewrite 2.0 to do this instead... but I have yet to master the black art of URL rewriting.

    • zenw0lf
      zenw0lf about 4 years
      Probably a simple window.open("the-new-url-goes-here", "_top"). If you are using links then <a href="some-url-goes-here" target="_top">Open me</a>.
  • ubiquibacon
    ubiquibacon over 13 years
    your answer looks like it might work, but I need to do this for every link on my site. If I have something like <a href="/test/test.html">test link</a> then how can I pass the /test/test.html to a single javascript function that will update every link that calls that function?
  • ubiquibacon
    ubiquibacon over 13 years
    I agree with you, it is hard to tell what is going on from my question, but when I give all the details my questions don't get answered because people don't like to read for very long :) I tried using the target tag like you said but couldn't get it to work right with my setup, but it did give me the idea to try some other attributes just for the sake of passing a value to my javascript function. I used rel just to hold the value and it works great. I know that isn't what the rel attribute is for but it works. See my updated question.
  • ubiquibacon
    ubiquibacon over 13 years
    awesome, I didn't know you could just add in attributes that were not native to the tag! Now I can use value instead of misusing the rel and/or rev attributes. Do you also know how I can make the updated URL display correctly in the info bar at the bottom of the browser window when I hover over the link? (see updated question).
  • MAW74656
    MAW74656 over 10 years
    Target = "_top" is by far the simplest way to do this! Thanks!