我一直在努力实现与该网站类似的效果:http://www.dubstep.net
如果您在任何播放器上单击播放或标题,您将看到一个窗口出现,具有叠加效果。这样的窗口就是iframe。通过查看页面源代码,我可以了解到 data-id=""
属性负责 iframe 中显示的内容。我就是不知道怎么办。当用户点击那个播放按钮时会发生什么?以及如何使用 data-id 属性?
最佳答案
这是一个相当简单的过程。他们将 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
元素内,用于显示目的。
关于javascript - 显示包含来自动态 url 的内容的叠加 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16147545/