Is there a way to hide a url on a web page?

Asked

Viewed 8,319 times

0

Let’s go by parts, I’m making a site where I will read a database URL and then I will use it in an image, by clicking on it(image) will open this URL (within an iframe or in a new tab).

In the code, I have a page using HTML and PHP where I show the image with the link URL visible:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <div> 
    <?php
        include ("connection.php");

        $sql = "SELECT * FROM table";
        $result = $conn->query($sql);

        if ($result->num_rows > 0) {
            // output data of each row
            while($row = $result->fetch_assoc()) {
                echo "<div class=\"gallery\">";
                echo "  <a target=\"iframe1\" href=\"".$row["url"]."\" onclick=\"openiframe()\">";
                echo "    <img src=\"images\\".$row["image"]."\" width=\"600\" height=\"400\">";
                echo "  </a>";
                echo "  <div class=\"desc\"><a href=\"".$row["url"]."\" target=\"_blank\">".$row["name"]."</a></div>";
                echo "</div>";
            }
        } else {
            echo "0 results";
        }

        $conn->close();
    ?> 
    </div>
</body>
</html>

The result of the previous code is something like this: inserir a descrição da imagem aqui

So far so good, now what I intended was not to be visible the URL, in the next image I marked what I speak: inserir a descrição da imagem aqui

There is a way to hide the URL using for example PHP or some other way?

2 answers

1


In the old days, in the old days, there was a method to this: window.status. Just put on the link something like onmouseover="window.status='Olá'" that when passing the mouse over the link appeared "Hello" in the browser status bar instead of the link in the href.

However, this method has been abolished and no longer has support in the most modern browsers.

One solution is to use the method window.open with onclick opening the URL in a new tab (some browsers will open in a new window):

<a href="javascript:void(0)" onclick='window.open("destino.html","_blank")'>link</a>

This way it will appear "javascript:void(0)' in the browser instead of the URL, and the "destination.html" URL will open in a new tab/window ("_Blank").

Using a function and deleting the script in the "programmer options" (Developers tools):

<a href="javascript:void(0)" onclick='abrirURL("qualquercoisa")'>link</a>

or

<a href="javascript:abrirURL('qualquercoisa')">link</a>

Script with a id:

<script id="novaJanela">
function abrirURL(i){
    if(i == "qualquercoisa"){
        i = "destino.html";
    }
    window.open(i,i);
}

// aqui eu excluo virtualmente a tag script da página pelo id "novaJanela"
// não há problema em excluir essa tag, ela continuará funcionando
// porque já foi inserida na memória após o carregamento da página
window.onload = document.getElementById("novaJanela").outerHTML = '';
</script>
  • I made an edit on the question because the other arrow was not noticed very well, I also need to hide in "code" the URL

  • @Tmc I updated the answer by changing href from "#" to "javascript:void(0)"

  • It turned out that the way you say to change does not appear the URL at the bottom of the page however missing in the "programmer options" see in the image of the question what I say if you do not understand me. I have two arrows in the picture.

  • @Tmc Got it, you want to hide in both places?

  • exactly, needed it, there is way?

  • @Tmc Exists by creating a function and assigning a variable to the URL. But if the user views the source code he can see the URL in the function, but it is possible to delete the function in the "programmer options".

  • @Tmc I added in the answer.

Show 3 more comments

0

You can use the function file_get_contents, and in it pass the URL of your image. The function will return a base64 of your image, so you just put that base64 within the tag IMG, would look something like this:

$base64 = file_get_contents('caminho_da_sua_imagem');
echo "<img src=\"data:image/png;base64, ".$base64."\">";

Remember that for each extension, it is necessary to inform on SRC:

  • PNG = <img src="data:image/png;base64, seu_base64">
  • JPG = <img src="data:image/jpg;base64, seu_base64">
  • GIF = <img src="data:image/gif;base64, seu_base64">
  • i did not want to brush the image URL but rather the image link URL as, is identified in the image I posted

  • this can also be used for a URL?

Browser other questions tagged

You are not signed in. Login or sign up in order to post.