2014-10-11 124 views
0

有没有一种方法可以使用iframe,但是当单击iframe内部的内容时页面实际上是什么,仍然会改变地址栏?我想在页面顶部有一个水平条,带有一个音乐播放器,可以在浏览网站时播放音乐。但是我也希望人们能够轻松地为书签添加书签。如何获取页面URL?

的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 ......这不是我想要的。我希望浏览器中显示的实际地址栏更新。

+0

你想要的网址显示的浏览器是您在iframe中设定的网址是什么? – 2014-10-11 10:54:42

+0

'document.getElementById(“dev”)。src' – 2014-10-11 10:55:05

+0

@ShirinAbdolahi是 – 2014-10-11 11:01:31

回答

0

简短的回答:

的解释:只要在浏览器的URL被改变一个全新的页面加载。这意味着你不能保持不变或不间断的iframe。如果不这样做,您也可以不使用Javascript更改网址。否则这将是一个安全风险。讨厌的人可能会显示一个网址,而你是完全不同的网址。

编辑:我要收回那句话,似乎有办法做到这一点,请参阅:

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