Question

The problem

In my application I have a parent page which contains an iframe to a child page in a subdirectory.

parent.html
subdir/child.html

From within the child page, I would like to set the location of the parent page using a relative url (“targetPage.html”), relative to the parent.

parent.html
targetPage.html (correct target)
subdir/child.html (source of action)
subdir/targetPage.html (incorrect)

From within the child, I can say:

window.parent.location = "targetPage.html";

…but of course, that (incorrectly) navigates the parent page to “subdir/targetPage.html”, because the code is running in the context of the child.

Calling code in the parent doesn’t help:

window.parent.myFunctionToNavigateToTarget(); // defined in parent to navigate to "targetPage.html"

… has the same effect, as the parent’s function is being run in the context of the child.

The Question

Is there an elegant way to set the location of another window using a relative URL, in such a way that it’s interpretted relative to that window?

Answer 1

You could grab the hostname and path off the parent window and then append your target page:

var targetPage = 'somepage.html';

var url = window.parent.location.href;
if(url.indexOf('.') > -1){
   url = url.substring(0, url.lastIndexOf('/') + 1);
}
window.parent.location = url + targetPage;