页脚声明按钮，如何实现点击后在新标签页打开URL？

php

2024-03-18 09:12:12

如何在页脚中声明时，通过按钮点击在新标签页打开URL

简介

对于HTML、CSS和JavaScript新手来说，可能会遇到这样的问题：如何在无法编辑正文内容的情况下，在单击按钮后在新标签页打开URL。本篇文章将提供一个详细的解决方案，仅在页脚中声明按钮即可实现这一功能。

问题

在使用CMS模板时，你可能无法在body标签中编辑内容，包括按钮代码。但是，你需要让用户在单击“注册”按钮后在新标签页中打开感谢页面。

解决方案

要解决这个问题，我们可以使用JavaScript在单击按钮后创建新标签页。具体步骤如下：

1. 在页脚中添加JavaScript代码

<script>
  document.getElementById('buttonRegister').addEventListener('click', function() {
    window.open('https://example.com/thankyou.html', '_blank');
  });
</script>

将此代码添加到页脚中，并将https://example.com/thankyou.html替换为感谢页面的实际URL。

2. 事件侦听器

document.getElementById('buttonRegister').addEventListener('click', function() {});

这将创建一个事件侦听器，它将在单击按钮时触发function()。

3. window.open()

window.open('https://example.com/thankyou.html', '_blank');

window.open()方法将打开一个新的浏览器窗口或标签页。'_blank'参数表示新窗口或标签页不会与当前页面关联。

代码示例

以下是如何将按钮代码添加到页脚中的示例：

<input type="button" class="btn btn-masuk fw-bold" value="Daftar" style="margin-top:20px; width:200px; text-align: center; display: grid; place-items: center; line-height: var(--text-size-default); height: 40px" id="buttonRegister">

然后，将JavaScript代码添加到页脚：

<script>
  document.getElementById('buttonRegister').addEventListener('click', function() {
    window.open('https://example.com/thankyou.html', '_blank');
  });
</script>