使用Java重定向HTML中的路由

问题描述

我有3个html文件，我想将它们链接在一起。这三个文件是button.html，option1.html，option2.html，所有三个文件都存储在一个src文件夹中。

button.html是一个包含两个按钮的简单网页：

<!DOCTYPE html>
<html>
<head>
      <title>Page Title</title>
      <script type="text/javascript">
        document.getElementById("option1").onclick = function () {
            location.href = "./option1.html";
        };
        document.getElementById("option2").onclick = function () {
            location.href = "./option2.html";
        };
    </script>
</head>
<body>

      <button type="button" id="option1">Option 1</button>
      <button type="button" id="option2">Option 2</button>

</body>
</html>

和另外两个.HTML文件是常规页面，每个页面都有不同的内容。

<!DOCTYPE html>
<html>
<head>
<title>Option 1/2</title>
</head>
<body>

  // different data contained for option1.html and option2.html
  <h1>Heading for Option 1 or 2</h1>
  <p>Paragraph for Option 1 or 2</p>

</body>
</html>

我不确定自己在做什么错，但是即使每个按钮都具有onClick（）函数，这些按钮也不会链接到其他HTML文件。我想知道我是否应该在两个HTML文件的标题中包含某种链接标记。另外，我不太确定location.href文件的script标签中的button.html行是什么。我刚刚在网上找到了一些资源可以尝试一下。

此外，我只需要使用Vanila Javascript，HTML和CSS来完成此操作。

请帮帮我。谢谢！

解决方法

已更新：，我相信这会起作用。首先，请始终将您的script标签添加到body标签之前。原因是，如果要查找的DOM元素未呈现，则该代码将无法工作。

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>

  <button type="button" id="option1">Option 1</button>
  <button type="button" id="option2">Option 2</button>

  <script type="text/javascript">
    document.getElementById("option1").onclick = function() {
      location.href = "./option1.html";
    };
    document.getElementById("option2").onclick = function() {
      location.href = "./option2.html";
    };
  </script>

</body>

</html>

您需要在关闭body标签之前添加script标签。

<!DOCTYPE html>
<html>
<head>
      <title>Page Title</title>

</head>
<body>

      <button type="button" id="option1">Option 1</button>
      <button type="button" id="option2">Option 2</button>
      <script type="text/javascript">
        document.getElementById("option1").onclick = function () {
            location.href = "./option1.html";
        };
        document.getElementById("option2").onclick = function () {
            location.href = "./option2.html";
        };
    </script>
</body>
</html>

如果您正在预览本地存储而不是Web服务器中的文件，则有一个称为同一源策略https://javascript.info/cross-window-communication#can-t-get-but-can-set的东西可能会受到location.href的影响。尝试将其更改为location =“ ./ option.html”等，删除hrer

或者，您可以制作一个不可见的标签，设置hrer，然后用JS单击它

var a = document.createElement（“ a”）; a.href =“ option1.html”; a.click（）;

并将其放在onclick函数中，

编辑刚刚意识到的另一件事

脚本标签位于html的头部，但按钮位于正文中，因此请尝试将脚本标签复制到正文标签的底部，按钮下方，或者将两个onclick函数都用{{1 }}

html javascript redirect

使用Java重定向HTML中的路由

问题描述

解决方法

相关问答