Question

是否有办法使用iframe，但在点击iframe内部的内容时，仍然会更改地址栏？我想在页面顶部有一个水平条，带有一个音乐播放器，可以在浏览网站时播放音乐。但我也希望人们能够轻松地为页面添加书签。

的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>

我已经搜索过，但无法找到答案。许多人只是想改变iframe中加载的URL ...这不是我想要的。我希望浏览器中显示的实际地址栏能够更新。

Answer 1

答案简短：否。

解释：每当更改浏览器中的URL时，都会加载一个全新的页面。这意味着您无法保持未更改或不间断的iframe。您也不能使用Javascript更改URL而不执行相同操作。否则这将是一种安全风险。讨厌的人可以在你完全不同的时候显示一个URL。

编辑：我必须回过头来，似乎有办法做到这一点，请参阅：

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

如何获取页面Url？

1 个答案: