javascript - Frame Busting 克星并不完全适用于 IE

Question

我一直在研究 Frame busting buster(名称中的含义，呵呵)，它使我的用户留在我的页面上并打开一个包含目标 URL 的新窗口。我正在使用 Lightbox 脚本来显示 iframe，这就是我正在做的:

1) 为所有 .lightbox 点击添加了一个事件，例如:

$('.lightbox').live("click", function(e) { 
  e.preventDefault(); 
  $('#redirectURL').val($(this).attr('href')); 
  $(this).lightbox(); 
}

2) 添加了一个 frame busting buster:

<script type="text/javascript">
    var prevent_bust = 0  
    window.onbeforeunload = function() { prevent_bust++ }  
    setInterval(function() {  
      if (prevent_bust > 0) {  
        prevent_bust -= 2  
        window.top.location = 'http://server-which-responds-with-204.com'  
      }  
    }, 1)  
</script>

3) 修改了 frame buster 代码以满足我的需要，它们是:

• 检测 iframe 是否要更改 window.top.location
• 如果是这样，使用 204 服务器响应防止这种情况发生
• 打开一个新页面:window.open( $('#redirectURL', '_blank' );
• 关闭灯箱:$('.jquery-lightbox-button-close').click();

到目前为止，这是我想出的:

var prevent_bust = 0  
window.onbeforeunload = function() { prevent_bust++ }  
setInterval(function() {  
  if (prevent_bust > 0) {  
    prevent_bust -= 2;
    redirectURL = $('#redirectURL').val();
    if(redirectURL != "") {
        window.top.location = 'http://www.****.com/ajax/nocontent.php';
        window.open(redirectURL, "_blank");
        $('.jquery-lightbox-button-close').click();
        $('#redirectURL').val('');
    } else {
        window.top.location = 'http://www.****.com/ajax/nocontent.php';
    }
  }  
}, 1); 

//编辑:在我忘记之前，“nocontent.php”是一个返回 204 header 的文件

对于 Firefox，它按照我编程的方式运行，如果在 window.top.location 中检测到变化，它会打开一个新的框架/页面并阻止 iframe 重新加载顶部位置并将其向上舍入，它会关闭 jQuery灯箱。

Safari/Chrome 的行为类似，它们会打开一个新的浏览器屏幕(不确定是否有选项说 target="_newtab"或其他内容？)。唯一不好的是他们并没有真正显示弹出窗口被阻止的消息，但我可以通过在我的网站上显示带有页面链接的弹出气球来解决这个问题。

Internet Explorer 令人震惊，是唯一剩下的害群之马。IE 不会打开新的弹出窗口，也不会阻止 iFrame 重置的 window.top.location，只是继续将整个页面刷新到 '#targetURL '.它与默认破坏代码的作用相同。所以这不是因为我的一些编辑。

谁能发现我的代码中的错误？

另外，我需要做一点修改，看看请求是由 iframe 还是用户自己发出的，因为现在用户真的没有选项可以通过更改工具栏中的地址或通过单击一个链接，这不是真正需要的 LOL。

提前致谢。

Answer 1

PENDO，我试着模拟了你描述的整个过程，ligthbox-jquery，javascript他们自己的代码和控件通过灯箱打开页面。我根本无法模拟，随着时间的流逝，我正在发送建议以扩大可能性和解决方案的范围。 我建议更换重定向页面:

 ...
  redirectUrl = $ ('# redirectUrl'). val ();
 ...
 window.top.location = 'http://www .****. with / ajax / nocontent.php';
 window.open (redirectUrl, "_blank");

替换为模拟页面的 DIV 容器，使用 ajax 调用并获取内容并覆盖 DIV 的内容。

 ...
 $.post(redirectoURL /* or desired URL */, function(data) {
     $('DIV.simulateContent').html(data);
 });
 ...

或

 ...
 $('DIV.simulateContent').load(redirectoURL);
 ...

这种方法还避免了阻止用户甚至使用地址栏离开您的页面的问题(正如您自己提到的)。

抱歉，让我给你一个完整的解决方案，但时间不允许。

PENDO，在解决问题的替代方案上做了更多工作，我找到了一个可自定义的 jQuery 灯箱插件，用于处理自定义窗口(iframe、html、内联 ajax 等)。也许它会有所帮助。以下链接:

 http://jacklmoore.com/colorbox/