Changing address bar when using iframe

Question

Is there a way to use an iframe, but still have the address bar change when clicking what's inside the iframe to what the page actually is? I want to have a horizontal bar at the top of the page with a music player that allows music to play while browsing the site. But I also want people to easily be able to bookmark the pages as well.

I've searched, but can't find the answer. Many are just looking to change what URL is loaded in the iframe...that's not what I want. I want the actual address bar displayed in the browser to update.

maiorano84 · Answer 1 · 2012-07-26T03:55:13.533

2

This sentence is here to help me reach the 30 character minimum. Ignore this and read the next sentence for your answer:

No.

UPDATE:

"Changing" and "Redirecting" are two different things. You need to clarify which it is. "Changing" the address bar is impossible. "Redirecting" IS possible.

Clicking on a standard link from within an iframe will not affect the topmost window on its own. A quick example of a Javascript redirect within an iframe would be something like this:

TOP WINDOW:

<html>
<head></head>
<body>
    <iframe src="http://yoursite.com/iframe_test.html" />
</body>

IFRAME TEST:

<html>
<head>
    <script>
    window.onload = ready;
    function ready()
    {
        document.getElementById("link1").onclick = linkClick;
        document.getElementById("link2").onclick = linkClick;
    }
    function linkClick(e)
    {
        e.preventDefault();
        window.top.location.href = this.href;
    }
    </script>
</head>
<body>
    <a id="link1" href="http://youtube.com">Link1</a>
    <a id="link2" href="http://facebook.com">Link2</a>
</body>

EXPLANATION:

Without the Javascript in place, what will happen when you click on a link in an iframe is that you will remain on the original page and the iframe will be redirected to the link you've clicked on. Using Javascript within an iframe in this fashion can force the topmost frame to redirect.

I would highly discourage relying on this in any way. It's sloppy programming in general, and I would stay away from iframes altogether if possible.

edited Jul 26 '12 at 03:55

answered Jul 26 '12 at 03:17

maiorano84

11,574
3
35
48

Alright, any suggestions on how this can be achieved then? AJAX? jQuery? There is obviously a way to do it, as other sites have achieved it. I'm not taking "No" as an answer here. – Rob Jul 26 '12 at 03:19
Facebook? Look at the top bar, and the sidebar containing ads. Youtube? Playlist. Last.fm? Music Player. Grooveshark.com? The whole site. – Rob Jul 26 '12 at 03:22
Those pages contain iframes, which in turn contain links. When you click on the links, you are being directed to exactly where the link is telling you to go. There is no Javascript, AJAX, or anything that is magically changing your address bar in those examples. As mentioned: You CANNOT change the address bar using AJAX or Javascript. – maiorano84 Jul 26 '12 at 03:27
If you want to REDIRECT from an iframe, then you will need to look into window.top.location – maiorano84 Jul 26 '12 at 03:29
[Some useful information on window.top.location](http://stackoverflow.com/questions/3332756/difference-between-window-location-href-and-top-location-href) – maiorano84 Jul 26 '12 at 03:33
So first you said no...but now yes. Alright. So, as long as someone is clicking on a link inside the iframe, the address bar of the browser WILL change to reflect that? Because that's not what I have been understanding when I've looked into it. – Rob Jul 26 '12 at 03:37
Review my update. That should be enough to get you started, now that I know that you want to redirect your users and not just change what's in the address bar. – maiorano84 Jul 26 '12 at 03:56
@maiorano84 Can you create a similar effect: 'add an address bar to an iframe, to direct the iframe', basically? – Wolfpack'08 Aug 11 '13 at 04:07

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

Yes, you can, but it's not a straightforward solution and it has some limitations

changing

You can use Web API messages and history API together to get what you want.

Example

Jsfiddle

redirecting

You can use the example above and replace the push history with a window.location.replace

Please consider the snippet as a hint to get what you want. The example above is not well thought for security (i.e. iframe script is sending messages to the parent, irrespective of its origin).

Changing address bar when using iframe

2 Answers2

changing

Example

redirecting

Linked