通过JavaScript转到链接[重复]答案

【问题标题】：Go to link by JavaScript [duplicate]通过JavaScript转到链接[重复]
【发布时间】：2021-07-09 18:47:22
【问题描述】：

你好朋友，我有一个文本输入和一个按钮在输入文本中，输入了一个链接，例如 Instagram 帖子的链接输入链接后，我想通过单击按钮转到链接如何使用 JavaScript 做到这一点？

  <div class="container">         
        <div class="main">
          <input type="text" placeholder="https//:www.instagram.com/..."
          id="link">
    
     <button id="button-1"><a href="#">go</a></button>       
        </div>
    </div>

【问题讨论】：

不要在按钮内放置链接。你要么有一个按钮，要么你有一个链接。所以在这种情况下，使用没有初始href 属性的<a>（不要将其设置为#，我们没有使用HTML4.01，在HTML5 中不是占位符：它的意思是“导航到页首”）。然后，在你的 JS 中，给输入元素一个 input 监听器，它将输入值分配给 a.href （在验证它实际上是一个链接之后，当然？）这样当人们点击“开始”时，他们点击一个正常的、真实的关联。然后使用 CSS 使您的<a> 看起来像一个按钮。这就是 CSS 的用途。
好的，谢谢！！！

标签： javascript html jquery button input

【解决方案1】：

捕获blur 事件的 URL 并将其应用于链接。您也可以通过这种方式验证有效的 URL。

window.addEventListener('load', () => {
  document.querySelector('#link').addEventListener('blur', el => {
    if (!el.target.value.includes('http')) {
      alert('Please enter a valid URL')
      return;
    }
    document.querySelector('#go-link').setAttribute('href', el.target.value)
  })
})

<div class="container">
  <div class="main">
    <input type="text" placeholder="https//:www.instagram.com/..." id="link">
    <a href="#" id='go-link' target="_blank">go</a>
  </div>
</div>

【讨论】：

这个问题可能是重复的，但是链接的重复解决方案并不真正适用于这个问题，所以无论如何我都会发布答案