顯示動態網址內容的重疊iframe

Question

我一直在努力實現與本網站類似的效果：http://www.dubstep.net
如果您點擊任何玩家的玩法或標題，您將看到一個窗口出現，並帶有覆蓋圖影響。這樣的窗口是iframe。從查看頁面源代碼我可以理解data-id=""屬性負責顯示iframe中顯示的內容。我只是無法弄清楚如何。當用戶點擊該播放按鈕時會發生什麼？以及data-id屬性如何使用？

Answer 1

這是一個相當簡單的過程。他們預先構建了HTML請求到www.dubstep.com/track/trackNumber，其中trackNumber是一個參數。所以在服務器端，在nginx（它們使用nginx作爲服務器，由curl -V「指紋」來判斷）中定義了RewriteRule。因此基本上www.dubstep.com/track/4567相當於www.dubstep.com/track/index.php?trackNumber=4567。

現在iframe是一種加載和顯示外部頁面的方法。他們這樣做的方式是類似這樣的想法：

$('.track').click(function(event) {// assuming track divs have class .track. 
    var iframe = document.createElement('iframe'); 
    iframe.src = "//www.dubstep.com/track/" + event.target.getAttribute("data-id");// this uses the data-id attribute of the clicked item. 
    iframe.height = // some computed height; 
    iframe.width = // some computed width; 
    iframe.name = "whatever"; 
    iframe.style.display = "none;" 
    // or 
    iframe.style.visibility = "hidden"; 

    document.getElementsByTagName('body')[0].appendChild(iframe); // element is inserted somewhere in the DOM. 
    // Now some form of transition is applied. 
    }); 

的iframe被包裹在兩個模式div元素中，用於顯示目的。

Answer 2

iFrames加載外部頁面。所有這些數據都是從.html（或同等）頁面中提取的。 data-id屬性的使用不會告訴你，因爲它肯定是服務器端處理的一種手段，用於收集和顯示某些曲目或其他內容（換句話說，它不會告訴你有關列出的網站以及它是如何作品）。

閱讀了有關框架：

http://www.w3.org/TR/html4/present/frames.html

Answer 3

你可以使用jQuery的colorbox。這很酷！

http://www.jacklmoore.com/colorbox/

之後包括

<script src="colorbox_folder/jquery.colorbox.js"></script> 
<link rel="stylesheet" href="colorbox_folder/colorbox.css" /> 

<a href="http://www.google.com" onclick="callingIframe()">Go to Google</a> 

這是JavaScript函數

function callingIframe() 
{ 
    $(".iframe").colorbox({iframe:true,onClosed:function(){ location.reload(true); },    width:"940", height:"650"}); 
}