CODEWITHSUNDEEP
javascriptphpcsswordpresselementor
Oliver Lossmann
Oliver Lossmann

Reputation: 37

Show a href link on a different hidden div when link is clicked

I haven't seen this proble manywhere, no clue if it could be possible but is there a possibility for me to have a link to a website but when I press the link the website opens up in a div on my site?

The reason for why I want this is becuase I have articles on my site and instead of opening the article itself I want it to be when I click the article it should open in a div that is hidden normally but shows when an article is clicked with the full article on it

`document.querySelectorAll('.title').forEach((item) => {
  item.addEventListener('click', (event) => {
    var get_href = document.querySelectorAll('.title').getAttribute('href')
    event.preventDefault()
    alert('get_href')
  })
})

Upvotes: 0

Views: 80

Answers (1)

EinLinuus
EinLinuus

Reputation: 675

You can create this using AJAX and JavaScript.

First,

  • detect a click on a link, (addEventListener)
  • then cancel the event so the user won't be redirected to the link, (event.preventDefault())
  • grab the link and (getAttribute('href'))
  • load it onto your page.

I'm not sure what exactly you want to do with that, but I think the most easiest way would be to create an iFrame and set the link as URL, because otherwise you might get problems with CORS (if the page is on a different URL and you don't own the other page).

document.addEventListener('click', function(event) {
   if(event.target.matches('a[href]')) {
      event.preventDefault();
      var url = event.target.getAttribute('href');
      // Do whatever you want, create/open a div, ...
   }
});

Here is an example of loading the website into an iframe: https://jsfiddle.net/1hefuLrs/

Upvotes: 1

Related Questions