-1

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.

Julian
  • 3
  • 1
  • 1
  • 2

2 Answers2

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'
       });
  })
Alex Nikulin
  • 8,194
  • 4
  • 35
  • 37
  • Hi Alex, thanks for your suggestion. Where exactly do I add the hash to the url.. I tried every combination I could think of and nothing enabled hiding the url.. ie it either opened with url in browser and a # added to the end, or it did not open at all (blank)? Sorry just not sure how to use this? – Julian Jul 22 '15 at 18:27
  • 1)you can open your urls in iframe;2)you can change hash url in adress bar;what you want more? – Alex Nikulin Jul 22 '15 at 18:38
  • I see. Unfortunately as I already mentioned, the javascript I posted here KILLS the ability to open in iframe?. Instead it opens in browser with the URL in view. Yes, if I could change the script hide url in the link and to open the link within an iframe, problem solved. I just don't know how. – Julian Jul 22 '15 at 18:47
0

This is a wrong approach. Why hide url's?

Allowed extensions can be set in front-end and back-end.

Html files can be viewed in an iframe. That's all. Of course, use Lightbox, Fancybox, etc. for nice design.

schellingerht
  • 5,726
  • 2
  • 28
  • 56
  • Hi Henri, thanks for your comment. Could you please provide steps for this? Am I right in you suggesting media library uploads can include html pages by somehow changing the allowed extensions? Or do you mean something else entirely? Thanks. – Julian Jul 22 '15 at 18:37