How to get page Url?

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.

index.html

  <!doctype html>
    <html lang="en" class="no-js">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="chrome=1">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
       <link rel="stylesheet" href="css/progression-player.css" />
        <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="css/skin-default-dark.css" />
        <link href="css/full_screen_preview-35a31c78a816c370986ed7e2eea38764.css" media="screen" rel="stylesheet" type="text/css" />
          <link rel="stylesheet" type="text/css" href="css/responsive.css">

        <script src="js/full_screen_preview-eecf95a281caedd3458fbe6a5102c4f3.js" type="text/javascript"></script>
    <script type='text/javascript' src='js/jquery.js'></script>
      <script src="js/jquery.min.js"></script>
    <script src="js/mediaelement-and-player.min.js"></script>
        <script src="js/mep-feature-playlist.js"></script>
    <script src="js/offcanvas.js"></script>
    <script type="text/javascript">
    //function geturl(obj){
    //alert(obj)
    //  }
    function geturl(){

        var devv= document.getElementById("dev").contentWindow.location.href
        alert(devv);
        }
    </script>






      </head>

      <body style="padding:0px; margin:0px;">


       <div class="full-screen-preview__header">
    <div class="responsive-wrapper responsive-audio">
    <audio autoplay id="myplayer" class="progression-single progression-skin progression-default-dark progression-audio-player" controls preload="none">
        <source src="" type="audio/mp3"/>
    </audio>


    </div>
    <script>
    function abc(url)
    {
      window.parent.$('#myplayer').attr('src',url);
    source=window.parent.$('#myplayer').attr('src');
    window.parent.$('.mejs-button').removeClass('mejs-pause');
    window.parent.$('.mejs-currenttime').text('00:00');
    window.parent.$('.mejs-time-handle').css('left','-8px');
    }
    /*$('.progression-playlist').mediaelementplayer({
        audioWidth: 400, // width of audio player
        audioHeight:40, // height of audio player
        startVolume: 0.5, // initial volume when the player starts
        loop: false, // useful for <audio> player loops
        features: ['playlistfeature', 'prevtrack', 'playpause', 'nexttrack','current', 'progress', 'duration', 'volume', 'playlist'],
        playlistposition: 'bottom' //Playlist Location
        });*/
        $('.progression-single').mediaelementplayer({
        audioWidth: 400, // width of audio player
        audioHeight:40, // height of audio player
        startVolume: 0.5, // initial volume when the player starts
        features: ['playpause','current','progress','duration','tracks','volume','fullscreen']
        });

    </script>

        </div>

    <iframe class="full-screen-preview__frame" id="dev" frameborder="0" onload="geturl()" src="home.html" noresize="noresize"></iframe>
    </body></html>

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.

you want the url shows in browser be the url you set in iframe? — Shirin Abdolahi, Oct 11 '14 at 10:54
Please reduce example code you post on site to the bare minimum demonstrating the issue with as little code and data as possible. Do not post your real code, instead write a demo for asking *from scratch*. that also better highlights your issue, e.g. as it is not always easy to find the right words to describe the problem what is asked about. — hakre, Oct 11 '14 at 11:07

KIKO Software · Accepted Answer · 2014-10-11T11:13:06.817

The short answer: No.

The explanation: Whenever the URL in the browser is changed a completely new page is loaded. This means you cannot keep an unchanged, or uninterrupted, iframe. You can also not change the URL with Javascript without doing the same. This would otherwise be a security risk. Nasty people could show one URL while you're on a completely different one.

EDIT: I have to take that back, there seem to be ways to do this, see:

http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page

How to get page Url?

1 Answers1