Javascript to hide url from browser and open in lightbox iframe

Question

I have the following javascript to hide URL.. this works fine..

<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>

MY QUESTION:

PROBLEM: I am producing forms for a membership site in wordpress. Membership plugins cannot protect html pages as html pages cannot be added via the media upload.

I wish to add the ability to open the link inside a lightbox iframe.. this is the end result I am after:

http://snag.gy/WuEZa.jpg

Currently, the above script will do half the job ie hide the URL when hovering over the link, but will open in a new browser tab with the URL in full view. If I can open the link inside a lightbox iframe, the target URL is not shown.

Can anyone help.

Answer 1

You can add hash to your current url, it's only for visibility.

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

Edit if you want open link in iframe, you need just set new src like here. And window.location.hash, helps you to manipulate iframe url, from code and from adress bar.

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

or just (without any changes in address bar)

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

or open in fancyBox, in one article i read

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