显示动态网址内容的重叠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"}); 
}