Question

我一直在尝试达到与此网站类似的效果：http://www.dubstep.net如果您点击任何玩家的游戏或标题，您将看到一个带有叠加效果的窗口。这样的窗口是iframe。从查看页面源代码我可以理解data-id=""属性负责iframe中显示的内容。我只是想不通如何。当用户点击播放按钮时会发生什么？以及如何使用data-id属性？

Answer 1

这是一个相当简单的过程。他们将HTML响应预先构建到www.dubstep.com/track/trackNumber的请求中，其中trackNumber是参数。因此，在服务器端，RewriteRule中定义了nginx（他们使用nginx作为服务器，根据curl -V“指纹”进行判断。）

所以基本上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/

之后包括您的脚本位置和css文件

<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"});
}

显示包含动态网址内容的叠加iframe

3 个答案: