javascript - 显示包含来自动态 url 的内容的叠加 iframe

Question

我一直在努力实现与该网站类似的效果:http://www.dubstep.net
如果您在任何播放器上单击播放或标题，您将看到一个窗口出现，具有叠加效果。这样的窗口就是iframe。通过查看页面源代码，我可以了解到 data-id="" 属性负责 iframe 中显示的内容。我就是不知道怎么办。当用户点击那个播放按钮时会发生什么？以及如何使用 data-id 属性？

Answer 1

这是一个相当简单的过程。他们将 HTML 响应预先构建到对 www.dubstep.com/track/trackNumber 的请求中，其中 trackNumber 是一个参数。所以在服务器端，在nginx中定义了一个RewriteRule(他们使用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 元素内，用于显示目的。