2014-10-11 125 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