iFrame src property and relative URLs not working

Question

I have a web page that has an iFrame in it with a definition in the HTML like the following:

<iframe id="page_is_fresh"  src="~/HTML/fresh.html" style="display: none"></iframe>

My site is running under a subfolder /Marketing so all urls are something like http://myserver/Marketing/SomeFolder/someitem.html

I have javascript to change the src of my iframe when an item on the form changes.

    $('#page_is_fresh').attr('src', '/HTML/stale.html');

The problem is, this makes the url http://myserver/HTML/stale.html

I tried using '~/HTML/stale.html' and that gives me http://myserver/Marketing/SomeFolder/~/HTML/stale.html which doesn't work either.

How can I get it to give me http://myserver/Marketing/HTML/stale.html without having to hard code the /Marketing part in?

Answer 1

Use ../HTML/stale.html instead of ~/HTML/stale.html or /HTML/stale.html in your javascript.

The server considers ~ to be a directory in the way you formatted it.

../ lets the server know it needs to start one directory up