Javascript 从浏览器中隐藏 url 并在 lightbox iframe 中打开

Question

我有以下 javascript 来隐藏 URL.. 这很好..

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
    $(function(){
        $("a.hidelink").each(function (index, element){
            var href = $(this).attr("href");
            $(this).attr("hiddenhref", href);
            $(this).removeAttr("href");
        });
        $("a.hidelink").click(function(){
            url = $(this).attr("hiddenhref");
            window.open(url, '_blank');
        })
    });
</script>
<style>
    a.hidelink {
        cursor: pointer;
        text-decoration: underline;
    }
</style>
<style>
    a.hidelink {
        cursor: pointer;
        text-decoration: underline;
    }
</style>

我的问题：

问题：我正在为 wordpress 中的会员网站制作表格。会员插件无法保护 html 页面，因为无法通过媒体上传添加 html 页面。

我希望添加在灯箱 iframe 中打开 link 的功能。这就是我想要的最终结果：

http://snag.gy/WuEZa.jpg

目前，上面的脚本将完成一半的工作，即当鼠标悬停在 link 上时隐藏 URL，但会在新的浏览器选项卡中打开 URL看法。如果我可以在灯箱 iframe 中打开 link，则不会显示目标 URL。

谁能帮忙。

Answer 1

这是一种错误的做法。为什么要隐藏 url 的？

可以在前端和后端设置允许的扩展。

Html 个文件可以在 iframe 中查看。就这样。当然也可以用Lightbox, Fancybox等来设计好看

Answer 2

您可以将哈希添加到当前 url，它只是为了可见性。

$("a.hidelink").click(function(){
      url = $(this).attr("hiddenhref");
      window.location.hash="url=" + url 
      window.open(url, '_blank');
})

编辑如果你想在 iframe 中打开 link，你只需要像这里一样设置新的 src。 window.location.hash，帮助您从代码和地址栏操作 iframe url。

<iframe id="iframe1" src="target.html"></iframe>

  $("a.hidelink").click(function(){
       var url = $(this).attr("hiddenhref");
       window.location.hash="url=" + url 
  })

$(window).bind('hashchange', function() {
   var hash = window.location.hash;
   if(hash.indexOf("#url=") > -1){
      var url = hash.replace('#url=', '');
       $(#frame1).attr("src",url);
   }
});

或者只是（地址栏没有任何变化）

  $("a.hidelink").click(function(){
       var url = $(this).attr("hiddenhref");
        $(#frame1).attr("src",url); 
  })

或者在fancyBox中打开，在一篇文章中我读到了

Lightbox doesn't do iframes. I'd recommend Fancybox

http://www.dynamicdrive.com/forums/showthread.php?66377-Lightbox-how-to-open-iframe-inside-lightbox-instead-of-image

  $("a.hidelink").click(function(){
       var url = $(this).attr("hiddenhref");
       $.fancybox.open({
         padding : 0,
         href: url,
         type: 'iframe'
       });
  })

Javascript 从浏览器中隐藏 url 并在 lightbox iframe 中打开

Javascript to hide url from browser and open in lightbox iframe

javascript

iframe

lightbox2