3

I don't know if it's possible but I'm trying to open a page by clicking on an HTML element. I detail below.

I have a web page in HTML with a source code from a third party tool (a code with products for affiliate purchases). So when the user clicks on one of the products in this code he is redirected to the third party merchant. Let's imagine the code as follows:

<head>
<script async defer src="[linkremoved]"></script>
</head>
<body>
<!-- my page content -->
<div>
<!-- Partner code -->
<div data-gyg-href="[linkremoved]" data-gyg-locale-code="fr-FR" data-gyg-q="Neuhausen"></div>
</div>
<!-- my page content -->
</body>

What I would like is that if the user clicks on a product, my site opens a page too, with a text like "Were you able to find your products? We would be interested in your feedback".

That's how I tried it but without success :

<head>
<script async defer src="[linkremoved]"></script>
</head>
<body>
<!-- my page content -->
<a href ="comments.html" target="_blank">
<div>
<!-- Partner code -->
<div data-gyg-href="[linkremoved]" data-gyg-locale-code="fr-FR" data-gyg-q="Neuhausen"></div>
</div></a>
<!-- my page content -->
</body>
Moerip
  • 61
  • 8
  • Does this answer your question? [How do I create an HTML button that acts like a link?](https://stackoverflow.com/questions/2906582/how-do-i-create-an-html-button-that-acts-like-a-link) – Reynadan Aug 23 '22 at 09:04
  • Thanks. Unfortunately not really because in fact there is the element that is displayed with the code and this one is already a link, and I would like that when clicking on it it also opens a link to my site in addition to the link to the affiliated products. – Moerip Aug 23 '22 at 09:10
  • How (or if) you can do this depends very much on what the partner code you haven't shown us does with the click. Please read [ask] with special attention to the part about providing a [mcve] – Quentin Aug 23 '22 at 09:10
  • Re edit: That doesn't look like a [mcve]. The partner code looks like it is manipulated by some JavaScript you haven't shared with us. – Quentin Aug 23 '22 at 09:13
  • @Quentin You are right, there was some code in the part, I just added it. – Moerip Aug 23 '22 at 09:16
  • Well, https://widget.getyourguide.com/dist/pa.umd.production.min.js is an unreadable mess. I doubt anyone here is going to reverse engineer it for you. – Quentin Aug 23 '22 at 09:17
  • Yes, but I thought you wouldn't need it and that we could add something around the code in the part. For example, add
    that encompass this code and make the link there. The content available under widget.getyourguide is not managed by me.
     – Moerip Aug 23 '22 at 09:20
  • How (or if) you can do this *still* depends very much on what the partner code does with the click. – Quentin Aug 23 '22 at 09:34

3 Answers3

2

If it's what im thinking the easiest way to do that is just by using javascript, example below.

// If you want to redirect user without opening a new tab, use this
// window.location.href="https://example.com";

// But if you want to open a new tab, use this
// window.open("https://www.example.com", "_blank");

function noNewTab() {
  window.location.href="https://example.com";
}

function newTab() {
  window.open("https://www.example.com", "_blank");
}

function localFile() {
   // First we will need to get the url of your webpage
   let currentUrl = window.location.origin;
   // To what file redirect?
   let redirectFile = "test.html";

   // And redirect. We will need to add / before the file path
   window.location.href = currentUrl + "/" + redirectFile;
   
}
<div onclick="noNewTab()">
  <p> Example product. Click on me! (No new tab) </p>
</div>

<div onclick="newTab()">
  <p> Example product. Click on me! (New tab) </p>
</div>

<div onclick="localFile()">
  <p> Example product. Click on me! (Change file, not url) </p>
</div>

With new tab it depends on browser if it allows to show it. On the modern browsers there is popout asking for access

ksawery297
  • 58
  • 1
  • 6
  • I forgot to add that it doesnt work in stackoverflow code snippet. Try it in developer tools -> console – ksawery297 Aug 23 '22 at 09:55
  • Thanks ! It was a great idea, but unfortunately I only have the partner code that seems to work. If I click on it, it opens the partner's products in my new window as expected, but not the desired page of my site. Do you know if I can maybe open two links with a HTML button ? I can try to do something else, if my wish is not possible. – Moerip Aug 23 '22 at 11:14
  • 1
    @Moerip Do you mean just opening 2 urls at the same time? If you are using the second solution (open in new tab) just paste another line of window.open to the function and it should work. For example: window.open("https://www.example.com", "_blank"); window.open("https://www.example.com", "_blank"); – ksawery297 Aug 23 '22 at 11:46
  • 1
    if you want to redirect user to your locally hosted HTML page, just set the url to the same that you are connecting in your browser and later when it will go for production change it. It would look something like this: window.location.href = "https://localhost:1234/your-new-page.html" – ksawery297 Aug 23 '22 at 11:49
  • I added another example how to redirect user to another file. It is localFile() function – ksawery297 Aug 23 '22 at 11:55
  • I'm going to open two links at the same time, one to GetYourGuide and the other to my site. Because it's not possible to add this javascript "around" their code. Thanks – Moerip Aug 23 '22 at 12:43
0

A possible approach is to use target="_blank" along with a click handler, like

 <a href="https://www.w3schools.com" target="_blank" onclick="yourfunction()">Visit W3Schools</a>

If you need to trigger this programmatically, then you can:

window.open(yoururl);
//Your further code...
Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
-2

I think that you should try to use span instead of div tag or maybe a p tag

<a href ="comments.html" target="_blank">
  <span>
    < HERE IS THE PARTNER CODE >
  </span>
</a>
Lindsay
  • 95
  • 1
  • 9