单击链接时，在不同的隐藏 div 上显示 href 链接答案

【问题标题】：Show a href link on a different hidden div when link is clicked单击链接时，在不同的隐藏 div 上显示 href 链接
【发布时间】：2021-07-09 12:59:26
【问题描述】：

我在很多地方都没有看到这个问题，不知道它是否可能，但是我是否有可能拥有一个网站的链接，但是当我按下链接时，网站会在我网站上的一个 div 中打开？

我想要这个的原因是因为我的网站上有文章，而不是打开文章本身，我希望它在我点击文章时打开，它应该在一个正常隐藏但显示文章时显示的 div 中打开被点击就可以看到全文了

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

【问题讨论】：

只想在您的网站上显示来自其他网站的帖子或页面？请提供有关您已经拥有的代码的更多信息。
你想要的肯定是 JavaScript，也可能是 AJAX。
你可以使用 iframe 吗？
所有事情都是可能的，但这真的取决于您到底想要什么，您可以抓取网站以获取正确的数据或在 iframe 中显示页面。但你获得它的来源也必须允许它，许多不允许它以任何形式从那里的网站上刮取数据/内容
我的帖子是用代码编辑的，你们可以看看我到目前为止得到了什么

标签： javascript php css wordpress elementor

【解决方案1】：

您可以使用 AJAX 和 JavaScript 创建它。

首先，

检测对链接的点击，(addEventListener)
然后取消事件，这样用户就不会被重定向到链接，(event.preventDefault())
获取链接并 (getAttribute('href'))
将其加载到您的页面上。

我不确定你到底想做什么，但我认为最简单的方法是创建一个 iFrame 并将链接设置为 URL，否则你可能会遇到 CORS 问题（如果页面是在不同的 URL 上，并且您不拥有其他页面）。

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

这是一个将网站加载到 iframe 中的示例：https://jsfiddle.net/1hefuLrs/

【讨论】：

没错，我编辑了我的帖子，所以你可以看到我到目前为止得到了什么，但你给我的是我想要做的。我的页面上有帖子，我不希望它在新页面中打开，我希望它在隐藏的 div 或 w/e 中的同一页面上打开，所以我稍后可以将其动画化以滑入屏幕并显示全文